vue 3 中 keepalive 动态缓存的核心是“用 meta 传意图、在 app.vue 做判断、靠 key 区分实例”，通过路由 meta 定义缓存策略，app.vue 中结合 v-slot 和条件渲染精准控制，并利用 include/exclude/max 及 onactivated 实现精细化管理。
Vue 3 中 KeepAlive 配合路由元信息实现动态缓存，核心是“用 meta 传意图、在 App.vue 做判断、靠 key 区分实例”。它不是开关式全局缓存，而是按需决策——哪个页面该缓、何时该清、状态怎么活。
路由配置：用 meta 定义缓存意图
在 router/index.js（或 .ts）中，为每个路由添加 meta.keepAlive 字段，值可以是布尔值、函数或任意可计算标识：
- 静态控制：直接写
meta: { keepAlive: true }或false，适合仪表盘、列表页等固定行为的页面 - 动态判断：用函数返回布尔值，例如
keepAlive: (to, from) => to.query.tab === 'active'，适用于同一组件不同 tab 下的差异化缓存 - 参数感知：如商品详情页
/product/:id，可写keepAlive: (to) => !!to.params.id，确保有 ID 才缓存，避免空参复用
App.vue：用 v-slot + 条件包裹实现精准启用
Vue 3 的 <router-view></router-view> 必须用 v-slot 解构 Component，再配合 <keep-alive></keep-alive> 分流渲染：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 缓存路径：
<keep-alive :include="['UserList', 'Dashboard']"><component :is="Component" :key="$route.fullPath"></component></keep-alive>，配合v-if="$route.meta.keepAlive" - 非缓存路径：单独用
<component :is="Component" :key="$route.fullPath"></component>，加v-if="!$route.meta.keepAlive" -
:key 是关键：设为
$route.fullPath或自定义 cacheKey（如`${$route.name}-${JSON.stringify($route.query)}`），防止相同组件不同参数被错误复用
精细化控制：include/exclude + max 防失控
仅靠 meta 不足以应对复杂场景，需叠加属性约束缓存范围：
-
include：显式列出要缓存的组件名（需在组件中定义
name），例如['OrderList', 'ProductSearch']，避免误缓登录页、404 页 -
exclude：排除高危组件，如
['Login', 'ResetPassword', 'NotFound']，优先级高于 include -
max：设为
10等合理值，防内存堆积；超出时按 LRU 自动清理最久未激活的实例
组件内响应：用 onActivated 替代 onMounted
被缓存的组件不会重复触发 onMounted，但每次切换回来必走 onActivated：
- 把“拉新数据”“重置临时状态”等逻辑移到
onActivated(() => { ... })中 - 避免在
onMounted里做页面级初始化，否则缓存后不再执行，导致状态陈旧 - 如列表页需刷新搜索结果，就在
onActivated调用fetchData()；如表单页需保留已填内容，就什么都不做——状态天然保留
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
