KeepAlive 本身不触发 Transition 动画，需通过外层 Transition 包裹 + v-if 控制组件显隐、配合 include 白名单缓存，或结合路由 meta、动态 key 与 onActivated/onDeactivated 钩子精细控制动画与状态。
KeepAlive 本身不触发 Transition 动画，必须靠手动控制组件的显隐状态 + 合理嵌套结构来实现缓存页面的丝滑切换。核心思路是：用 <KeepAlive> 包裹需要缓存的组件，但把 <Transition> 放在它的外层或内层（取决于动画目标），并通过 v-if 或 include/exclude 配合生命周期钩子控制入场/离场时机。
1. 基础结构：Transition 包 KeepAlive，用 v-if 控制切换
这是最常用、最可控的方式。让 <Transition> 管理「是否渲染」，<KeepAlive> 管理「是否缓存」：
-
<Transition>的name自定义类名，写好 CSS 过渡（如.slide-enter-active） -
v-if绑定当前路由对应的组件名或 key，切换时触发 Transition -
<KeepAlive>包裹具体组件，设置include白名单，确保组件实例被缓存 - 注意：不要对
<KeepAlive>本身加v-if，否则会破坏缓存——要作用在它内部的组件上
示例片段：
<Transition name="slide"><KeepAlive include="Home,Profile">
<component :is="currentComponent" />
</KeepAlive>
</Transition>
2. 进阶控制：监听路由变化 + 手动管理 key
当默认的 component :is 切换不够精细（比如需要不同方向滑动、或想保留离开页的视觉残留），可结合路由元信息和动态 key：
- 给路由配置
meta: { transition: 'slide-left' }或'slide-right' - 用
watch($route)比较 to/from，设置transitionName和currentKey -
<Transition :name="transitionName">+<component :key="currentKey">触发重绘 -
<KeepAlive>仍包裹该 component，缓存逻辑不受 key 影响（只要组件名一致）
3. 注意 keep-alive 的激活/停用钩子配合动画节奏
onActivated 和 onDeactivated 是关键时机点，可用于补足 Transition 无法覆盖的逻辑：
- 进入缓存组件时（
onActivated），可恢复滚动位置、重新请求非实时数据 - 离开时（
onDeactivated），可保存表单草稿、暂停定时器，避免后台运行干扰动画 - 如果动画依赖 DOM 尺寸（如 height 过渡），建议在
onActivated的 nextTick 中操作，确保 DOM 已挂载
4. 常见坑与绕过方案
-
Transition 不生效？ 检查是否误把
v-if加在了<KeepAlive>标签上——应加在它内部的<component>或具体组件上 -
动画卡顿或重复触发？ 确保每次切换时
:key有变化（哪怕只是加个时间戳），避免 Vue 复用节点跳过 Transition -
离开页还显示在屏幕上？ 用
position: absolute+z-index控制层叠，配合leave-to类做位移隐藏，而非直接销毁 -
keep-alive 缓存失效？ 确认组件名与
include完全一致（区分大小写），且组件导出为命名导出或设置了name选项
