include与exclude控制路由缓存技巧

本文深入解析了 Vue 中通过 include 与 exclude 精准控制路由缓存的核心策略——以“按需缓存、动态释放”为理念，用 include 白名单只保留 UserList、OrderDetail 等状态昂贵页面的缓存，用 exclude 黑名单强制剔除登录页、新建表单等绝不该缓存的组件（支持正则批量匹配），再结合 max 容量限制与运行时 delView 清理机制实现内存可控，最后借助路由 meta 字段将缓存逻辑下沉至配置层，让同一组件在不同入口下智能启用或绕过缓存，真正达成高性能、低耦合、易维护的缓存治理方案。

用 include 和 exclude 控制路由缓存，核心是“按需缓存、动态释放”——不是所有页面都该留着，也不是缓存了就永远不放。

include 做白名单：只缓存真正需要的组件

它明确列出哪些组件名要进缓存池，其余一律不缓存。关键前提是：每个路由组件必须定义 name，且和 include 中写的字符串完全一致。

• 推荐用数组形式管理，比如 include="['UserList', 'OrderDetail', 'Dashboard']"
• 配合路由 meta 字段，在路由配置里标记 keepAlive: true，再统一收集到 include 列表中，可读性和维护性更好
• 适合缓存的页面：列表页（带筛选/排序）、多步骤表单、图表看板等状态贵、重建成本高的页面

exclude 做黑名单：主动排除不适合缓存的页面

当某些页面绝对不能保留旧状态时，直接在 exclude 里写死组件名，优先级高于 include。哪怕它同时出现在 include 里，也会被跳过。

• 典型场景：登录页、404 页面、新建表单页（如“新增用户”）、实时消息页
• 可以写成数组：exclude="['Login', 'NotFound', 'CreateUser']"，也可用正则匹配批量排除，例如 /^Temp.*/ 排除所有临时页
• 特别注意：表单提交成功后跳转，若返回时不该带旧数据，就在目标路由的组件名加入 exclude

动态清理缓存：让缓存“活”起来

静态 include/exclude 解决不了“用户操作后需清空某页状态”的问题，得靠运行时干预。

• 在 Vuex 或 Pinia 中维护一个 cachedViews 数组，记录当前被缓存的组件名
• 通过 activated / deactivated 钩子监听组件激活与失活，在合适时机调用 delView 手动从缓存中移除指定组件
• 例如：用户提交订单后，执行 this.$store.commit('DEL_CACHED_VIEW', 'OrderCreate')，下次再打开就是干净的新页面
• 搭配 max 属性设上限（如 max="10"），超出时自动按 LRU 淘汰最久未用的缓存，防内存爆炸

结合路由 meta 实现智能决策

把缓存逻辑从模板层下沉到路由配置，更清晰也更易扩展。

• 在路由定义中加 meta: { keepAlive: true, autoRemove: true }
• 在布局组件中，根据 $route.meta.keepAlive 动态生成 include 列表；再监听 beforeRouteLeave，若 autoRemove 为真，就立即清除当前组件缓存
• 这样同一个组件在不同入口下可有不同缓存行为——从列表点进来保留状态，从菜单直接进入则全新加载

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~