keepalive缓存依赖组件name选项，需显式声明；include/exclude严格匹配name值；避免router-view动态key干扰；路由name与组件name不可混淆；max值过小会触发lru淘汰。
一、确保组件显式声明 name 选项
KeepAlive 判断是否缓存一个组件，核心依据是组件实例的 name 选项值，而非路由配置中的 name 字段。若组件未定义 name，即使路由 meta 中设置 keepAlive: true，缓存也不会生效。
1、打开目标组件文件（如 UserList.vue）。
2、在<script>标签内显式导出 name 属性：<br>export default { name: 'UserList', data() { return {}; } }。</script>
3、若使用<script setup>，需确认 Vue 版本 ≥ 3.2.34；否则必须通过插件或分离 script 块方式声明 name，例如：<br><script>export default { name: 'UserList' };</script>。
二、正确配置 include/exclude 匹配逻辑
include 和 exclude 参数仅对具有有效 name 的组件起作用，且匹配过程严格区分大小写与字符一致性。若传入数组或正则，必须确保其内容与组件 name 完全对应，否则缓存策略将被跳过。
1、在 App.vue 或 Layout.vue 中定位
2、将 include 设置为字符串数组形式：
:include="['UserList', 'OrderSearch']"，注意引号内名称须与组件 name 逐字一致。
3、若需正则匹配，使用 v-bind 绑定并确保语法正确：
:include="/^(User|Order)/"，避免遗漏起始 ^ 或结尾 $ 导致误匹配。
4、排除特定组件时，exclude 值同样需精确，例如 exclude="['Login', 'NotFound']"。
三、避免 router-view 的 key 干扰缓存
为
1、检查
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
2、若存在，将其移除或改为静态值，例如 key="static"。
3、如确需响应路径变化触发更新，应改用 activated 钩子执行数据拉取，而非依赖 key 强制重渲染。
四、区分路由 name 与组件 name 的职责
路由配置中的 name 仅用于编程式导航和命名视图，而 KeepAlive 的 include/exclude 匹配对象是组件自身的 name 选项。二者名称不一致是导致缓存“看似配置成功却无效”的最常见原因。
1、检查 router/index.js 中对应路由的 component 所指向的 .vue 文件。
2、确认该文件 script 中导出的 name 值（如 name: 'ArticleList'）。
3、确保 include 数组中写入的是 'ArticleList'，而非路由配置中的 'article-list-route'。
五、合理设置 max 值并理解 LRU 淘汰行为
max 属性限制缓存组件实例总数，超出后按最近最少使用（LRU）原则自动清除最久未激活的实例。若 max 设置过小（如 1），可能导致刚缓存的组件立即被替换，表现为“缓存一闪而逝”。
1、评估项目中需长期保活的页面数量，例如列表页、搜索页、多步骤表单页。
2、将 max 设为略高于该数量的值，例如 5 或 8。
3、在组件中监听 deactivated 钩子，确认其是否被意外触发，以判断是否发生 LRU 淘汰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
