KeepAlive 实现多页签缓存需三要素协同：1. 按 route.path+query+params 生成稳定 cacheKey；2. 在 RouterView 处动态 v-if 包裹 KeepAlive 并绑定 key；3. TagsView 增删/切换/刷新时调用 dropByName、router.replace 等同步操作，并在 activated/deactivated 中清理副作用。
KeepAlive 本身不直接支持多页签（TagsView）缓存，它只负责包裹单个组件并控制其激活/缓存状态。要实现真正的多页签缓存，关键在于：动态控制 <keepalive></keepalive> 的包裹范围、按路由精准命名缓存 key、配合路由切换手动触发激活/休眠，并与 TagsView 的增删逻辑深度协同。
1. 按路由路径生成唯一且稳定的缓存 key
缓存失效的常见原因是 key 不稳定（如含随机数、时间戳）或未区分带参路由。应使用 route.path + route.query + route.params 组合生成 key，确保相同 URL 对应同一缓存实例。
- 推荐写法：
`${route.path}?${new URLSearchParams(route.query).toString()}` - 对带动态参数的路由（如
/user/:id），需把params.id显式拼入 path 或 query，避免所有 /user/* 共用一个缓存 - 避免用组件名（如
name）作 key —— 多个路由复用同一组件时会互相覆盖
2. 动态包裹页面组件，而非全局包裹 App
不要在根组件外一层套 <keepalive></keepalive>，而应在路由出口处（如 <routerview></routerview> 渲染位置）做条件包裹：
<KeepAlive include="user-detail,order-list" :key="cacheKey"> <RouterView /> </KeepAlive>
更灵活的做法是结合 v-if 和路由元信息（meta.keepAlive = true）动态控制：
- 给需要缓存的路由配置
meta: { keepAlive: true } - 在布局组件中：
<keepalive v-if="$route.meta.keepAlive" :key="getCacheKey($route)"><routerview></routerview></keepalive> - 不满足条件时直接渲染
<routerview></routerview>，避免无意义包裹
3. 与 TagsView 联动：增删标签时同步操作缓存
TagsView 点击关闭标签、右键刷新、拖拽排序等操作，必须触发 KeepAlive 的对应行为：
- 关闭标签 → 调用
dropByName(cacheKey)清除对应缓存（注意：不是drop所有，而是精准删除） - 刷新当前页 → 先
dropByName(cacheKey)，再通过router.replace触发重新 mount - 切换标签 → 保证
<keepalive></keepalive>的:key更新，使 Vue 正确激活目标缓存实例 - 可封装 hooks（如
useTagsViewCache）统一管理 cacheKey 映射、drop、refresh 等逻辑
4. 注意缓存生命周期与副作用清理
被 KeepAlive 包裹的组件不会触发 beforeUnmount，但会触发 activated/deactivated 钩子 —— 这是清理定时器、取消请求、暂停动画的正确时机：
- 在
onDeactivated中清除setInterval、addEventListener、watch返回的 stop 函数 - 在
onActivated中恢复轮询、重连 WebSocket、重新聚焦输入框等 - 避免在
onBeforeUnmount中写清理逻辑 —— 它可能根本不会执行
不复杂但容易忽略：KeepAlive 缓存的是组件实例，不是 DOM。只要 key 不变、组件没被 drop，再次进入就是原样激活。把 key 管理、路由联动、生命周期钩子三者串起来，多页签缓存就稳了。
