VueJS View is not refreshing when I change the router paramId

Question

I have the following router that accepts a param ID

{   
   path: '/Filters/Edit/:id',
   name: 'Manager.FilterEditor',
   component: FilterEditor
},

When I try to navigate from one filter to another using router.push, the view remains the same.

router.push({ name: 'Manager.FilterEditor', params: { id: newfilter.id } });

The URL updates to the new ID, but the models remain the same.

Answer 1

You have to add a key attribute at the router-view in the master view.

<router-view :key="$route.path" />

The key will help VueJS to notice the change and trigger the model bounding and the view redraw.