keepalive 的 include 是筛选器而非开关，只缓存匹配组件；需显式声明组件 name，支持字符串、数组（推荐响应式）、正则三种写法，并与路由 meta.keepalive 配合使用，exclude 优先级更高。
KeepAlive 的 include 属性不是“开关”，而是“筛选器”——它只让匹配的组件进入缓存队列，不匹配的直接走普通渲染流程，不会被缓存。在 Vue 3 中正确使用 include，关键在于组件名必须准确、可识别，且与路由配置协同工作。
确保组件有明确且一致的 name
include 匹配的是组件的 name 选项，不是文件名或路由名。如果没显式声明，Vue 会尝试从文件路径推导（如 UserList.vue → "UserList"），但不可靠。务必在每个需要缓存的组件中写明：
- export default { name: 'UserList', setup() { ... } }
- const UserList = defineComponent({ name: 'UserList', setup() { ... } })
三种 include 写法及适用场景
在 App.vue 或布局组件中包裹
-
字符串形式：适合固定少量页面，如
<keep-alive include="UserList,Dashboard"></keep-alive>。简单直接，但无法动态更新 -
数组形式：最常用，支持响应式。可结合路由 meta 动态生成：
computed(() => route.meta.keepAlive ? [route.name as string] : [])
或维护一个白名单数组：const cachedNames = ref(['UserList', 'OrderList']) -
正则表达式：适合按命名规则批量匹配，例如缓存所有带 “Page” 后缀的组件：
<keep-alive :include="/Page$/"></keep-alive>→ 匹配 DashboardPage、ReportPage 等
include 和路由 meta 要配合使用
单独设 include 只是“允许缓存”，真正决定“是否启用缓存”的仍是路由层意图。推荐组合方式：
- 路由定义里加
meta: { keepAlive: true }标记意图 - App.vue 中用
<keep-alive :include="cachedNames"></keep-alive>限定范围 - 同时用
v-if="$route.meta.keepAlive"控制是否把当前组件丢进 keep-alive —— 避免未标记的组件误入
注意 exclude 的优先级更高
如果某个组件既在 include 列表里，又命中 exclude 规则（比如 :exclude="['Login', 'NotFound']"），它一定不会被缓存。这个特性适合排除登录页、404页、临时弹窗页等无需状态保持的场景。建议把 exclude 当作“安全阀”，兜底过滤掉不该缓存的页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
