Vue Router路由变更后，如何在App.vue的<router-view/>更新后调用函数

嗨，我完全懂你的困扰——你想在<router-view>里的内容随着路由切换更新后调用目标函数，但updated()钩子没触发，这其实是个很常见的Vue路由场景问题。

原因很简单：updated()生命周期钩子只会在组件自身的响应式状态发生变化时才会触发。路由切换时，App.vue本身的data/props没有任何变化，只是<router-view>渲染了不同的子组件，所以App.vue的updated()自然不会被调用。

这里有两种靠谱的解决方案，你可以根据场景选择：

方案一：监听路由变化（推荐，性能更优） #

直接在App.vue里监听$route对象的变化，这是最直接且高效的方式，不需要额外修改DOM结构：

export default {
  // ...其他代码
  watch: {
    $route(to, from) {
      // 路由切换完成后执行你的逻辑
      console.log("changed");
      setTimeout(() => {
        console.log("in timeout");
        this.$store.dispatch("clearGeneralState");
      }, 5000);
    }
  },
  // 如果需要页面初始加载时也执行一次逻辑，可以添加immediate选项
  // watch: {
  //   $route: {
  //     handler(to, from) {
  //       // 你的逻辑
  //     },
  //     immediate: true
  //   }
  // }
}

方案二：给<router-view>绑定唯一Key #

通过给<router-view>绑定$route.fullPath作为key，强制每次路由切换时都销毁并重建子组件，这样App.vue的updated()钩子就会被触发（因为<router-view>的key变化会导致App的DOM更新）：

<template>
  <div id="app">
    <!-- 添加key绑定 -->
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

<script>
export default {
  updated() {
    console.log("changed");
    setTimeout(() => {
      console.log("in timeout");
      this.$store.dispatch("clearGeneralState");
    }, 5000);
  }
}
</script>

⚠️ 注意：这种方式会让每次路由切换都重新创建子组件，可能带来一定的性能开销，适合组件逻辑简单的场景。

内容的提问来源于stack exchange，提问作者Ganesh Dagadi