Losing router.params on page refresh

Question

I'm encountering an issue with vue-router.
I got a list of posts in the homepage. When I click on one of them, it redirects to the post page such as :

<router-link :to="{ name: 'article', params: {id: article.id, slug: article.slug } }"></router-link>

Everything is working perfectly, I can retrieve the data of the correct article using this.$route.params.id in a getter.

My issue : When I reload on an article page, this.$route.params.id is undefined, which causes the entire application to crash.

How can I save the router.params despite a page reload ?

Answer 1

What backend are you using? You need to enable history mode on your router, as well as make some additional configuration changes on your backend web server. Please refer to this link for the additional server side configuration changes you will need to make for this to work properly.

Also, please make note of this 404 caveat when using history mode..

Edit: you could try something like this since the ID remains persistent in the URL: Look for the solution from MIKE AXLE

I don't know if anyone else if facing the same issue, but I was having a problem getting route params on refresh. The route parameter I was trying to get was an ID number and I use that ID to fetch data and populate the page. I found (through many console logs) when I refreshed, the number was turning into a string and thats why the page was not working. I sorted it out but casting the ID to number before using it:

Number($route.params.id)

Answer 2

You can also use query instead of params

<router-link :to="{ name: 'article', query: {id: article.id, slug: article.slug } }"></router-link>

and to get value on redirecting page

this.$route.query