[Vuejs]-Vue router not firing if only slug changes

4👍

I believe your axios calls are located in one of component’s lifecycle hooks (i.e. beforeCreate). The problem is that Vue Router tries to reuse components wherever it is possible. In your case, going from /tag/tag1 to /tag/tag2, the only thing that changes is parameter so it’s still the same component and the router does not recreate it again.

There are two solutions:

  1. Put the axios calls to beforeRouteUpdate hook meaning they will be fired every time route in the component changes.
  2. Add key attribute to router-view, which will make the router to recreate every component.
<router-view :key="$route.fullPath"></router-view>

Source: A post from a member of the core team of Vue’js

Leave a comment