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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more