关键在于组件的name选项而非路由名；include设白名单（字符串/数组/正则）仅缓存指定组件，exclude设黑名单（优先级更高）排除特定组件，未设name的组件无法被匹配缓存。

要精准控制哪些组件该缓存、哪些不该缓存，关键不是写路由名或页面路径，而是盯住组件自身的 name 选项。include 和 exclude 的匹配对象永远是组件定义里的 name 字段，不是路由配置中的 name 或路径，这点最容易出错。

include 做白名单：只缓存明确指定的组件

当你希望只有少数几个页面保持状态，其余一律不缓存时，用 include 最稳妥。它支持字符串、数组、正则三种写法：

• 字符串写法：include="UserList,OrderDetail" —— 只缓存 name 为 UserList 和 OrderDetail 的组件
• 数组写法：:include="['UserList', 'OrderDetail']" —— Vue2 中需加冒号绑定，推荐用于变量控制
• 正则写法：:include="/^Report.*/" —— 缓存所有 name 以 Report 开头的组件，比如 ReportChart、ReportExport

注意：如果组件没设 name（比如 export default {} 里没写 name），或者用了匿名函数式组件，就无法被 include 匹配到，自然不会被缓存。

exclude 做黑名单：主动排除必须“清空”的页面

exclude 优先级高于 include，哪怕某个组件同时出现在 include 和 exclude 里，也会被跳过缓存。适合用于那些“每次打开都必须干净”的场景：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 登录页、404 页面、新建表单页（如 CreateUser、CreateOrder）
• 实时性要求高的页面（如消息中心、监控看板）
• 表单提交成功后跳转的目标页（避免用户返回时看到旧数据）

写法示例：exclude="['Login', 'NotFound', /^Temp.*/]'，可混合字符串与正则，批量拦截临时页或系统页。

动态清理缓存：让缓存响应用户操作

静态配置解决不了“用户点提交后，下次打开要全新表单”这类需求。这时需要运行时干预：

• 在组件的 activated 或 deactivated 钩子中监听状态变化
• 配合 Vuex/Pinia 维护一个 cachedViews 数组，记录当前缓存的组件名
• 提交成功后调用 this.$store.commit('DEL_CACHED_VIEW', 'OrderCreate')，从缓存中移除对应组件
• 搭配 max="10" 属性防内存溢出，超出时自动按 LRU 清掉最久未用的缓存

验证是否生效的小技巧

缓存是否起作用，不能只看页面内容是否保留，还要确认组件生命周期：

• 首次进入：触发 created → mounted → activated
• 切换离开再回来：只触发 deactivated → activated（不走 created/mounted）
• 若 exclude 生效，来回切换会反复触发 created → mounted，说明没被缓存

在组件里打印日志或加断点，比肉眼观察更可靠。

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