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>

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

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