5

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 ?

blickblick
  • 197
  • 1
  • 4
  • 15

5 Answers5

3

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)

Community
  • 1
  • 1
Matt Oestreich
  • 8,219
  • 3
  • 16
  • 41
  • Thank you for your response. I'm using Laravel. Apache mod_rewrite is already set up, as well as the 404 page. I still have the route and the URL is ok but component isn't loading because i use `this.$route.params.id` in it, which is undefined when I reload – blickblick Apr 23 '19 at 15:07
  • Does the ID persist in the URL or does it get removed on refresh as well? – Matt Oestreich Apr 23 '19 at 15:20
  • It persists on the URL – blickblick Apr 23 '19 at 15:55
  • It may be a long shot, but you could [try this solution](https://stackoverflow.com/questions/39950582/vue-router-route-with-params-not-working-on-page-reload) I have updated my answer with the possible solution (not the one marked as accepted, the one below it) – Matt Oestreich Apr 23 '19 at 16:00
  • 1
    Indeed that was it! Thank you very much :) – blickblick Apr 24 '19 at 09:32
3

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
Swift
  • 790
  • 1
  • 5
  • 19
2

I'm not sure what is your route definition, the problem can be that only one of the params presented in the route URL (e.g. /article/:slug).

When you invoke a route (by clicking on router-link or calling router.push), you passing both params directly and they persist in the memory. That's why both are accessible. But when you reload the page - everything that Vue can do is to parse your URL. Means only one param parsed because only one param is present.

As a solution you can:

  • use both params in the route URL (e.g. /article/:id/:slug);
  • or use one param and call your API to retrieve remaining information (e.g. get id by slug if your route is /article/:slug).
Ruslan Isay
  • 933
  • 7
  • 10
1

I had the same issue pass the url in router

/article/:id/:slug

you will not loose your params after resfresh because whenrefreshng vue will take only data from url and forget if you passed params

WillianBabuu
  • 427
  • 5
  • 9
1

You should route like this:

{
      path: '/article/:id/:slug',
      name: 'article', 
}

In your view when routing do it like this:

this.$router.push({ name: 'article', params: { id: articleID, slug: articleSlug}});

You're welcome!

shoriwa-shaun-benjamin
  • 797
  • 7
  • 19