DEV Community

Brylie Christopher Oxley
Brylie Christopher Oxley

Posted on

4 2

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)