Vue组件缓存需按需实现：路由meta.keepAlive标记意图，keep-alive通过include动态匹配组件名，结合路由守卫或计算属性支持动态策略，并利用activated/deactivated管理生命周期。
Vue 组件缓存配合路由元信息实现按需缓存，核心在于用 meta 字段标记意图、用 <keep-alive> 做执行判断、再通过组件名或运行时逻辑动态控制缓存范围。不是所有页面都该缓存，也不是缓存了就一劳永逸——关键在“按需”二字。
路由配置中用 meta.keepAlive 标记缓存意图
在定义路由时，直接在 meta 中声明是否需要缓存，这是最基础也最清晰的信号源：
- 设置
meta: { keepAlive: true }表示该路由默认应被缓存（如首页、工作台） - 设置
meta: { keepAlive: false }明确排除（如登录页、表单提交成功页） - 不设该字段则视为“无明确要求”，后续可由统一逻辑兜底处理
注意：这个字段本身不生效，它只是传递意图的“信标”，真正起作用的是你在 <keep-alive> 中如何读取并响应它。
在 router-view 外层用 keep-alive 动态过滤
不要直接包裹全部路由，而是结合 include 或 v-if 做条件渲染。推荐写法是：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 在 App.vue 或 Layout 组件中，用
<keep-alive :include="cachedNames">，其中cachedNames是一个计算属性 - 该计算属性遍历
$route.matched，收集所有当前匹配路由中meta.keepAlive === true的组件名 - 确保每个被缓存的组件都定义了
name（如export default { name: 'Dashboard' }），否则无法被 include 匹配
这样做的好处是：路由跳转时自动更新缓存白名单，无需手动维护字符串数组，也避免了缓存不该缓存的页面。
支持动态场景：同一组件不同访问路径缓存策略不同
比如「商品详情页」/product/:id，从搜索页进来要缓存（保留筛选态），但从订单页进来就不该缓存（避免状态污染）。这时仅靠静态 meta.keepAlive 不够，需升级策略：
- 在路由守卫（如
beforeEach）中，根据from或查询参数（如to.query.from = 'search'）动态设置to.meta.keepAlive - 或者，在
cachedNames计算逻辑里增加运行时判断：例如检查$route.params.id是否在某个白名单内，或是否携带特定 flag - 更进一步，可将缓存开关抽成组合式函数（如
useCacheRule()），把业务规则集中管理
配合 activated / deactivated 管理缓存生命周期
缓存启用后，组件不再走 created/mounted，而是触发 activated 和 deactivated。这是补全策略的关键环节：
- 在
activated中做“恢复动作”：比如重新拉取可能过期的数据、恢复滚动位置、重置局部 loading 状态 - 在
deactivated中做“保存动作”：比如暂存表单草稿、记录当前 tab 或筛选条件到sessionStorage - 避免在
activated里无差别刷新全部数据——应结合时间戳、版本号或业务标识判断是否真需更新
