vue 3多标签页缓存核心是状态隔离、识别与清理，需结合路由meta控制开关及cachekey、router-view按需包裹keepalive、pinia管理状态并以cachekey隔离、关闭tab时同步清理缓存与状态。

Vue 3 中实现多标签页缓存，核心不是让所有页面“不销毁”，而是让每个标签页的状态可隔离、可识别、可清理。简单套 <keepalive></keepalive> 会翻车，关键在路由控制 + 缓存键设计 + 状态归属管理。

路由层：用 meta 控制缓存开关和区分维度

每个路由必须配置 name 和 meta，这是精准缓存的前提：

• 基础开关：加 meta: { keepAlive: true } 表示该路由组件允许被缓存
• 防串扰关键：对复用组件（如 /user/1 和 /user/2）不能只靠组件名缓存，要提供唯一缓存键。推荐写法：
  meta: { keepAlive: true, cacheKey: `user-${route.params.id}` }
• 动态判断：也可用函数返回布尔值，比如编辑页只缓存已填写内容的实例：
  keepAlive: (to) => to.query.from === 'list' && to.params.id

视图层：router-view + KeepAlive 的正确包裹方式

不要全局包裹整个 <router-view></router-view>，而要按需渲染：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 用 v-slot 解构出当前组件，再配合条件判断：
  

  <router-view v-slot="{ Component }"><br><keepalive :include="cachedNames"><br><component :is="Component" :key="getCacheKey($route)"></component><br></keepalive><br><component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath"></component><br></router-view>

• cachedNames 是一个响应式数组，由 Pinia store 维护，增删对应标签页的打开/关闭
• getCacheKey 函数返回值应包含参数（如 ID）、查询字段等，确保同组件不同数据不共用缓存

状态层：组件内状态归谁管？别全扔给 setup

缓存生效后，onActivated 和 onDeactivated 钩子比 mounted/unmounted 更关键：

• 表单数据、筛选条件、分页页码等**用户操作态**，建议统一存到 Pinia store，并以 cacheKey 为命名空间隔离（例如 userStore.data['user-1001']）
• 滚动位置、弹窗开关等**UI 局部态**，可用 ref 存在组件内，<keepalive></keepalive> 会自动保留它们
• 避免在 setup 里直接用 ref({}) 存大量对象——若未做 key 区分，多个 tab 会互相覆盖

标签页管理：关闭时同步清理缓存与状态

用户点 × 关闭 tab，不只是从 UI 列表移除，还要联动清理：

• 从 Pinia 的 cachedViews 数组中删除对应路由的 name 或 cacheKey
• 调用 KeepAlive 的 include 响应式更新，触发内部 LRU 清理逻辑
• 主动清除该 tab 对应的 Pinia 状态片段（如 userStore.clearById('user-1001')），防止内存堆积
• 如果用了 max 限制缓存数量，也要注意：LRU 是按激活时间淘汰，不是按 tab 关闭顺序

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！