KeepAlive 缓存生效需组件有 name、路由设 meta.keepAlive 控制开关，用 activated/deactivated 接管状态，手动清理脏数据防串；name 是前提，动态 cacheKey 可隔离多实例，key 可强制重建。

KeepAlive 不是“加了就缓存”，而是要让缓存可识别、可开关、可接管、可清理。核心在于：组件必须有 name，路由需带 meta.keepAlive 控制开关，状态变化靠 activated/deactivated 接管，脏数据靠手动清除防串。

组件命名是缓存生效的前提

KeepAlive 默认通过组件的 name 选项匹配并缓存实例，不是靠文件名、路由 path 或 component 路径。如果没写 name，哪怕路由 meta 写了 keepAlive: true，缓存也完全不生效。

• Vue 3 中推荐在 defineComponent 里显式声明 name：name: 'ProductList'
• 使用 defineAsyncComponent 加载的组件，也要确保其内部组件导出时带有 name
• 复用同一组件（如 UserForm.vue）处理不同路由（/user/create 和 /user/edit/:id）时，name 必须一致，否则无法复用缓存逻辑

按路由元信息动态控制缓存开关

把缓存策略下沉到路由配置层，最灵活也最可控。通过 meta.keepAlive 字段决定是否启用缓存，并可配合 meta.cacheKey 实现多实例隔离。

在SEO发布前，从路由清单生成XML网站地图和robots.txt

当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。

下载

• 在路由定义中设置：meta: { keepAlive: true } 或 meta: { keepAlive: false }
• 对需要区分实例的场景（如编辑不同 ID 的商品），添加动态 cacheKey：cacheKey: route => `ProductEdit_${route.params.id}`
• 在 App.vue 或 Layout 组件中，用 v-slot 解构 Component，并结合 v-if 控制渲染：<component :is="Component" v-if="$route.meta.keepAlive" />

用 activated / deactivated 替代 mounted / unmounted

被 KeepAlive 包裹的组件不会反复触发 mounted/unmounted，取而代之的是 activated（激活时）和 deactivated（停用时）。这是维持状态和同步数据的关键钩子。

• 在 activated 中恢复滚动位置、重新拉取必要更新（如时间敏感数据）、重置临时标记
• 在 deactivated 中保存当前滚动位置、暂存表单草稿、清理定时器或事件监听
• 注意：这两个钩子只对 KeepAlive 直接包裹的组件生效，不冒泡到子孙组件

精准清除缓存，避免数据污染

缓存不是永久的，尤其在用户操作导致状态失效时（如提交成功后返回列表页），必须主动清理对应缓存，否则下次进入会显示过期内容。

• 通过 include 或 exclude 动态更新 KeepAlive 的缓存白名单/黑名单
• 调用 router.push 后，在目标页面的 activated 钩子里判断来源，决定是否清除上一页缓存：if (from.name === 'OrderEdit') { cachedViews = cachedViews.filter(v => v !== 'OrderList') }
• 对复用组件（如详情页共用 DetailView.vue），用 key 强制重建：<DetailView :key="$route.fullPath" />