Vue Router：关闭嵌套路由时如何更新父组件？

先看一下你的路由配置：

{ 
  path: '/parent', 
  name: 'parent', 
  component: Parent, 
  beforeEnter: (to, from, next) => { 
    console.log(to, from); 
    next(); 
  }, 
  children: [ 
    { path: ':child', component: Child }, 
  ] 
}

你遇到的问题很典型——beforeEnter作为路由级别的守卫，只会在首次进入/parent路由时触发。当你从/parent/john导航回/parent时，父组件Parent并没有被销毁重建，只是子组件Child被卸载了，所以beforeEnter不会再次执行，自然无法触发父组件的更新。

下面给你几个精准解决这个场景的方案：

方案1：使用组件内的beforeRouteUpdate守卫 #

Vue Router专门提供了beforeRouteUpdate守卫，用于当前路由复用同一组件实例的场景（正好匹配你现在的情况：从子路由返回父路由，父组件实例被复用）。你可以直接在Parent组件内部定义这个守卫，在路由更新时执行你的逻辑：

// Parent.vue
export default {
  // ...其他组件选项
  beforeRouteUpdate(to, from, next) {
    // 这里写你需要更新父组件的逻辑，比如重新拉取数据、更新状态等
    console.log('从子路由返回父路由，开始更新组件');
    // 必须调用next()才能继续路由跳转
    next();
  }
}

这个守卫会在路由发生变化但组件未被销毁时触发，逻辑清晰且符合Vue Router的设计意图，是最推荐的方案。

方案2：监听$route对象的变化 #

如果你更喜欢用监听的方式实现，可以在Parent组件里监听$route的变化，根据路由跳转的来源和目标执行更新逻辑：

// Parent.vue
export default {
  // ...其他组件选项
  watch: {
    $route(to, from) {
      // 可选：精准判断是否是从子路由返回父路由
      if (from.path.startsWith('/parent/') && to.path === '/parent') {
        // 执行父组件更新逻辑
        console.log('回到父路由，触发组件更新');
      }
    }
  }
}

这种方式灵活性更高，你可以根据to和from的路由信息做更细致的条件判断。

方案3：给<router-view>添加key属性（可选） #

如果你希望回到父路由时完全重建父组件实例（而不是复用现有实例），可以在承载父组件的<router-view>上绑定key为$route.fullPath：

<!-- 顶层路由容器中 -->
<router-view :key="$route.fullPath"></router-view>

这样每次路由变化时，<router-view>都会重新渲染对应的组件，包括父组件。不过这个方案会带来组件销毁重建的开销，除非你有特殊需求，否则优先考虑前两个方案。

内容的提问来源于stack exchange，提问作者a--m