Call a function after router-view in App.vue has been updated due to route change by vue-router-CodePudding

I want to call a function after the contents in <router-view/> in App.vue has been updated due to change in a route. I tried using the updated() lifecycle hook but the function is not being called.

However, when there is a change in the state outside <router-view /> within App.vue The function is being called. Is there a way to call the function upon change in <router-view />

Here is my updated hook's code:

updated() {
  console.log("changed");
  setTimeout(function () {
    console.log("in timeout");
    store.dispatch("clearGeneralState");
  }, 5000);
},

CodePudding user response：

If you want to run some code whenever the route changes, you can either

Watch the $route object (you can also watch its properties like $route.path or $route.query.someQueryParam depending on your needs):

watch: {
  $route() {
    // do something
  }
}

Use navigation guards