Vue嵌套路由下router-view包裹transition后离开过渡不生效问题咨询

问题根因 #

这不是嵌套路由场景的特有问题，核心是Vue的节点Diff逻辑和路由组件卸载优先级导致的：
你当前没有给router-view绑定和路由唯一对应的key，切换路由时Vue会默认复用同位置的router-view节点，直接销毁内部旧的子路由内容，不会触发transition的离开阶段生命周期。你加的appear属性只负责组件首次挂载的入场动画，对路由切换的离场逻辑没有作用。

最佳实践解决方案 #

按以下两步修改即可实现预期的进入、离开双过渡效果：

1. 给transition包裹的router-view绑定$route.fullPath作为唯一key，保证每次路由切换Vue都能识别到内容变化，完整触发进入、离开两个过渡周期
2. 给transition添加mode="out-in"属性，保证旧子路由节点完全离场后再渲染新节点，避免两个路由内容同时存在导致布局错乱

修改后的代码示例：

<template>
  <!-- 父组件内包裹子路由的部分 -->
  <transition name="fade" mode="out-in" appear>
    <router-view :key="$route.fullPath" />
  </transition>
</template>

<style scoped>
/* 别漏写对应的过渡样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

如果你的场景存在从子路由直接跳转到父路由之外路径的需求，只需要额外给父路由的根节点也加一层同样配置的transition即可，不需要额外的路由守卫或者定时器逻辑。

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