Vue Router 多标签页缓存需基于稳定 cacheKey（path+query+params）、按路由 meta 精准控制 KeepAlive、联动 TagsView 手动管理生命周期，并在 activated/deactivated 中清理副作用。
Vue Router 实现多标签页缓存，不能只靠 `
按路由生成唯一且稳定的 cacheKey
缓存失效或错乱，90% 出自 key 不稳定。必须用 `route.path + route.query + route.params` 拼接出唯一标识，而不是组件 name 或随机值。
- 推荐写法：
${route.path}?${new URLSearchParams(route.query).toString()}，确保查询参数顺序不影响结果 - 对动态路由（如
/user/:id），要把params.id显式拼进 path 或 query，例如/user/123?_cacheId=123，避免所有/user/*共用一个缓存 - 禁用组件 name 作 key —— 多个路由复用同一组件时会互相覆盖，比如“新建用户”和“编辑用户”都用 UserForm.vue
在 RouterView 处动态控制 KeepAlive 包裹
不要全局包裹 `
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 给需要缓存的路由配置
meta: { keepAlive: true } - 在 Layout 中这样写：
<KeepAlive v-if="$route.meta.keepAlive" :key="getCacheKey($route)"><br> <RouterView /><br></KeepAlive>
- 不满足条件时直接渲染 `
`，避免空包裹消耗性能
与 TagsView 深度联动，手动管理缓存生命周期
KeepAlive 不感知标签页操作，必须在 Tabs 关闭、切换、刷新时主动调用对应 API。
立即学习“前端免费学习笔记（深入）”；
- 关闭标签 → 调用
keepAliveInstance.dropByName(cacheKey)精准删除，不是清空全部 - 刷新当前页 → 先
dropByName(cacheKey)，再router.replace({ path: $route.path, query: $route.query })触发重新挂载 - 切换标签 → 确保 `
` 的 `:key` 更新，Vue 才能正确激活目标缓存实例 - 建议封装一个组合式函数（如
useTagsViewCache）统一维护 cacheKey 映射、drop、refresh 和 activated/deactivated 清理逻辑
在 activated/deactivated 中清理副作用
被 KeepAlive 包裹的组件不会触发 beforeUnmount，但会准确触发 activated 和 deactivated。
- 在
deactivated中：清除定时器、取消未完成的请求、暂停轮播或动画 - 在
activated中：恢复定时器、重新拉取必要数据（如需）、重置局部状态（如表单校验错误提示） - 避免在
mounted或created中做一次性初始化以外的操作，否则可能重复执行
