[Vuejs]-Reload navbar component on every this.$router.push() call

by

4👍

✅

I solved the problem with adding :key="$route.fullPath" to Navbar component:

<template>
  <div id="app">
    <Navbar :key="$route.fullPath"></Navbar>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>
👤Michael Harper

1👍

Check this out from the docs:

beforeRouteUpdate (to, from, next) {
  // called when the route that renders this component has changed,
  // but this component is reused in the new route.
  // For example, for a route with dynamic params `/foo/:id`, when we
  // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
  // will be reused, and this hook will be called when that happens.
  // has access to `this` component instance.
},

I expect your Navbar component is reused across routes so its mounted and updated are not called. Try using beforeRouteUpdate if you want to do some processing on route change.

👤bernie

Leave a comment