keep-alive 通过缓存组件实例而非销毁重建来实现路由切换时的状态保持，需配合 include/exclude、路由 meta 或组件 name 精准控制，并使用 activated/deactivated 钩子管理生命周期。
SPA 中点击返回按钮不刷新页面，核心是让组件在路由切换时保持状态不销毁——keep-alive 就是为此而生。它不是“阻止跳转”，而是让匹配的组件实例被缓存而非销毁重建。
keep-alive 基础用法：包裹需要缓存的视图
在 Vue Router 的 <router-view> 外层套一层 <keep-alive>，就能启用缓存机制：
<keep-alive> <router-view /> </keep-alive>
这样所有路由组件默认都会被缓存（首次加载后，再次进入不会重新 mounted）。但实际项目中通常需要更精细控制：
- 只缓存特定路由（如列表页 + 详情页组合）
- 排除某些页面（如登录页、404 页）避免状态污染
- 配合
include/exclude使用组件名（需显式设置name）
精准控制缓存：include/exclude + 组件 name
Vue 要求被缓存的组件必须声明 name 选项，否则 include 无法识别：
// List.vue
export default {
name: 'ListPage',
// ...
}
然后在模板中指定缓存范围：
<keep-alive :include="['ListPage', 'DetailPage']"> <router-view /> </keep-alive>
或者用正则、数组变量动态管理。注意：exclude 优先级高于 include，适合排除临时页或表单页。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
配合路由元信息（meta）实现条件缓存
更灵活的方式是结合 route.meta.keepAlive，在路由定义中声明是否可缓存：
const routes = [
{
path: '/list',
component: () => import('./List.vue'),
meta: { keepAlive: true }
},
{
path: '/detail/:id',
component: () => import('./Detail.vue'),
meta: { keepAlive: true }
},
{
path: '/login',
component: () => import('./Login.vue'),
meta: { keepAlive: false } // 显式关闭
}
]
再在模板中动态绑定：
<keep-alive :include="cachedViews"> <router-view /> </keep-alive>
并在组件 data 或 computed 中维护 cachedViews 数组，监听 $route 变化，把当前路由的 meta.keepAlive === true 的组件名加入缓存列表。
处理缓存生命周期：activated/deactivated 替代 mounted
被 keep-alive 包裹的组件不会重复触发 mounted 和 destroyed，取而代之的是两个专属钩子：
-
activated：组件被激活（从缓存中显示）时触发，适合恢复滚动位置、重新拉取部分数据、启动定时器 -
deactivated：组件被停用（切走但未销毁）时触发，适合清理定时器、暂停视频、保存当前状态
例如列表页返回时自动滚动到上次位置：
export default {
name: 'ListPage',
data() {
return {
savedScrollTop: 0
}
},
activated() {
this.$nextTick(() => {
window.scrollTo(0, this.savedScrollTop)
})
},
deactivated() {
this.savedScrollTop = document.documentElement.scrollTop || document.body.scrollTop
}
}
不复杂但容易忽略：keep-alive 缓存的是组件实例，不是 DOM；它依赖组件 name 匹配，也受 key 属性影响（同一路由不同参数需加 :key 避免复用）；另外 SSR 不支持 keep-alive，仅适用于客户端渲染场景。
