DEV Community

Brylie Christopher Oxley
Brylie Christopher Oxley

Posted on

Update "router-view" when Vue route changes

Sometimes, your Vue route will change, but will not trigger your router-view to update.

There is a simple way to tell the router-view, or any component, to update. Just bind the component key property to a reactive data source. In the case of router changes, you can bind the router-view to the $route.fullPath as follows:

<router-view :key="$route.fullPath"></router-view>
<!-- more verbose with v-bind:key -->
<router-view v-bind:key="$route.fullPath"></router-view>
Enter fullscreen mode Exit fullscreen mode

Now, any time the full path changes, the router-view will be updated.

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

Discussion (0)