VueJS hook mounted() is not called when page is re-open by vue-router

Question

Please, look the flux below, it's shows my problem. I'm using vue-router with this.$router.push to browsing on pages. I'm starting on PageA.

• PageA -> PageB ( mounted() of PageB is called)

• PageB -> PageA (returning to PageA)

• PageA -> PageB (mounted() of PageB is not called)

It sounds that page (.vue component) is not closed and mainted on cache or other thing. I must use the mounted() method every time that page is open and maybe close the page and clean from cache. How I can solve it?

Answer 1

Vue 3

For those that ended up here like me looking at why I'm not getting unmounted called on a component inside a page, when route changes, here's some guidance:

Let's say you have Page A that uses Component A in it, and Page B that does not use Component A.

When you open Page A for the first time, Component A will have, as expected, mounted method called.

However, when you navigate to Page B, Vue3 won't un-mount or destroy Component A, rather it will deactivate it, and deactivated method will be called instead of unmounted.

Once you navigate back to Page A, Component A will be reactivated and method activated will be called instead of mounted.

Answer 2

vue will re-use components were possible, this is expected.
Normally you would watch for route changes and update your component state accordingly.

To react to route changes you can use beforeRouteUpdate():

const Example = Vue.extend({
  template: `
  	<div>
  		<p>This changes: '{{param}}'</p>
    </div>`,
  data(){
    return {
      param: this.$route.params.param
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.param = to.params.param;
    next();
  }
});

const router = new VueRouter({
  routes: [
    {
      path: '/:param', component: Example,
    }
  ]
})
const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/foo">foo</router-link><br>
  <router-link to="/bar">bar</router-link><br>
  <router-view></router-view>
</div>

Alternatively you can also watch the route and update the state accordingly:

Vue.extend({
  watch: {
    '$route'() {
      // TODO: react to navigation event.
      // params cotains the current route parameters
      console.log(this.$route.params);
    }
  },
  // ....
});

The vue-router documentation has a few great examples for this: Data Fetching - Vue Router

If you still want to use mounted(), you can do so by giving your router-view a key that will change when the route changes, e.g.:

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

This will force the component to be re-created every time, so it does have a performance penalty - i would recommend using the route hooks described above, if possible.