vue router same page refresh

Question

I want to go from the following URL, http://localhost:8081/#/scenarios/SCNRF3SZ2FS54E66B456, to this one, http://localhost:8081/#/scenarios/SCNRF3XAPLPJ241807A9. But it does not work, here is the code:

export default new Router({
   mode: 'hash',
   linkActiveClass: 'open active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
       path: '/',
       redirect: '/scenarios/:id',
       component: Full,
       beforeEnter: beforeEnter,
       children: [{
       path: '/scenarios/:id',
       name: 'Scenario',
       component: Scenario
     }]
   }
  ]
 })

How do I make it work?

Solution

If I understand your problem correctly, it is that your route isn't updating with new data when the id changes.

To solve this you can watch the route for changes or incorporate it into the beforeRouteUpdate hook, the router docs do a good job of explaining it:

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

Comments

[Decade Moon]

It's not clear what exactly isn't working. Can you provide a MCVE? I'll guess that you're probably not responding to beforeRouteUpdate hook in your component; Vue will reuse the same component instance across route changes so created and mounted hooks won't be called when the route changes.