动态路由配合keep-alive实现多组件缓存的关键是用唯一key区分实例并确保组件有稳定name且在include中；推荐和name: 'UserDetail'，配合activated/deactivated钩子精细控制状态。
动态路由配合 keep-alive 实现多组件缓存，核心在于让不同路由参数（如 /user/1、/user/2）对应的同一组件实例被分别缓存，避免切换时状态丢失。关键不是“能不能缓存”，而是“如何区分并保留每个实例的状态”。
用 include + name 控制缓存范围
keep-alive 默认只缓存有 name 选项的组件，且需显式声明在 include 中才生效。动态路由通常复用同一个组件（比如 UserDetail.vue），所以必须确保该组件设置了唯一且稳定的 name：
- 在组件内定义
name: 'UserDetail'（不能依赖文件名自动推导，尤其在异步加载时） - 在布局中使用：
- 不推荐用字符串通配（如
include="User*"），易误伤或漏缓存
用 key 强制区分不同路由实例
仅靠 name 不够——keep-alive 会把所有 /user/:id 当作同一个组件实例处理，导致切换用户时复用旧状态。解决方案是为 router-view 添加唯一 key：
- 推荐写法：
:key="$route.name + '-' + $route.params.id" -
key变化会触发 Vue 重新创建组件实例，keep-alive就会把每个key对应的实例单独缓存 - 避免用
$route.params对象本身作 key（引用不变，无法触发更新）
配合 activated/deactivated 做状态微调
缓存后组件不会重复执行 created/mounted，但可能需要响应激活/失活时机：
-
activated钩子适合：恢复滚动位置、重新拉取非关键数据、启动定时器 -
deactivated钩子适合：清除定时器、暂停轮询、保存临时编辑内容到localStorage - 注意：不要在
activated里无条件刷新全部数据（违背缓存初衷），可结合lastFetchTime判断是否过期
处理表单/输入框状态丢失的常见补救
即使用了 keep-alive，某些情况仍会丢状态（如父组件强制重渲染、v-model 绑定到未响应式数据）：
- 表单项数据必须定义在
data()或setup()的响应式变量中（如ref或reactive） - 避免直接操作 DOM（如
document.getElementById().value），改用双向绑定 - 对富文本编辑器等第三方组件，查阅其是否支持持久化（如
quill的setContents），并在activated中恢复
不复杂但容易忽略：缓存生效的前提是组件没被销毁，而 key 和 name 是两个缺一不可的开关。只要路由变化时 key 改变，且组件有稳定 name 并在 include 列表里，Vue 就会自动管理多个独立缓存实例。
