Vue-router component reusing

Question

I would like to know how can I stop component reusing in Vue-router.

I'm building a simple page application and I am unable to update data after clicking the same link twice.

Is it possible to somehow force reloading or what are the best practices in my situation?

Answer 1

Vue Router reuses the same component therefore the mounted hook won't be called. As stated in the documentation:

The same component instance will be reused [...] the lifecycle hooks of the component will not be called.

If you want to update the data you have two options:

• Watch the $route object

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

• Use the beforeRouteUpdate navigation guard

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

For a more detailed explanation you can check the section Reacting to Param Changes of the Vue Router documentation: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes.

Answer 2

Use the key attribute on router-view set to current url. It's built in, so no need to write any code.

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