页面重叠本质是新旧路由组件动画期间同时可见，根本解法是控制过渡顺序：旧页面完全离开后新页面才进入；需将严格包裹，且CSS类名与name值匹配、组件模板单根节点、慎用keep-alive组合。
页面重叠，本质是两个路由组件在动画过程中同时处于 DOM 中并可见。根本解法不是调时长或改透明度，而是控制过渡顺序——让旧页面完全离开后，新页面才开始进入。mode="out-in" 正是为此设计的属性，但直接加了没效果，往往是因为配置位置或结构不匹配。
必须加在包裹 router-view 的 transition 标签上
常见错误是把 <transition></transition> 套在某个子组件里，或者只包住部分页面内容。它必须作用于整个路由出口：
- 正确写法：
<transition name="fade" mode="out-in"><router-view></router-view></transition> - 错误写法：在页面组件内部再套一层
<transition></transition>，此时路由切换逻辑已执行完毕，无法干预组件卸载/挂载时机 - Vue Router 4 + Vue 3 组合中，
<router-view></router-view>是动态组件，只有外层 transition 才能捕获其切换生命周期
name 值要与 CSS 类名严格对应
mode 生效的前提是动画类能被正确识别和触发。如果写了 name="slide"，但 CSS 里定义的是 .fade-enter-active，那动画根本不会启动：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 确保 CSS 中使用
.your-name-enter-active、.your-name-leave-active等命名（如name="slide"→ 对应.slide-enter-active） - 至少定义
enter-active和leave-active的transition属性，否则无过渡过程 - 示例 CSS：
.slide-enter-active,<br>.slide-leave-active {<br> transition: all 0.3s ease;<br>}<br>.slide-enter-from {<br> opacity: 0;<br> transform: translateX(30px);<br>}<br>.slide-leave-to {<br> opacity: 0;<br> transform: translateX(-30px);<br>}
避免 template 下存在多个根节点
Vue 3 要求组件模板必须有且仅有一个根元素。若路由组件（即 router-view 渲染出的内容）的 template 写成这样：
- ❌ 错误结构：
<div>Header</div> <main>Content</main> - ✅ 正确结构：
<div class="page"> <div>Header</div> <main>Content</main> </div> - 原因：
mode="out-in"依赖 Vue 对组件挂载/卸载的精确控制。多根节点会让 Vue 无法生成唯一 key 或统一管理 DOM 节点，导致 leave 阶段未完成就触发 enter，视觉上就是重叠或闪白
慎用 keep-alive 与 mode 的组合
当配合 <keep-alive></keep-alive> 缓存页面时，mode="out-in" 仍有效，但需注意缓存逻辑可能干扰预期行为：
- 若某页面被
keep-alive缓存，再次进入时不会触发leave，也就没有“先退再进”的完整流程，重叠感可能转为状态错乱 - 建议：对需要动画的页面，明确设置
include白名单；对不需要动画或常驻的页面（如首页、导航页），可排除在缓存外 - 例如：
<keep-alive :include="['Home','List']"><component :is="Component" :key="route.path"></component></keep-alive>
