关键在于分层包裹KeepAlive、组件显式命名及路由meta动态控制缓存：父级缓存ProjectList等，子级缓存DetailTab1等；name必须是字符串字面量；用route.meta.keepAlive动态收集缓存列表；状态管理应使用onActivated/onDeactivated而非onMounted/onUnmounted。
Vue 嵌套路由配合 KeepAlive 缓存多级页面，关键不是“全包”，而是“分层包裹 + 精准命名 + 动态控制”。缓存失效、状态丢失、onMounted 多次触发等问题，几乎都源于 KeepAlive 没有落在正确的 <router-view> 层级，或子组件缺少稳定 name。
只在需要缓存的 router-view 上套 KeepAlive
不要在最外层 Layout 中用一个 KeepAlive 包住全部路由。嵌套路由是树状结构，每一级 <router-view> 都是独立出口，缓存也必须逐层配置：
- 父路由组件（如
ProjectLayout.vue）中，只对它的直接子<router-view>使用<KeepAlive>，并用:include明确指定要缓存的子路由组件名（如['ProjectList', 'ProjectDetail']） - 子路由组件（如
ProjectDetail.vue）如果自己还有<router-view>（比如展示多个 tab 或子模块），那就再在它内部单独加一层<KeepAlive>，缓存它的子组件（如['DetailTab1', 'DetailTab2']） - 每层的
KeepAlive相互独立：父层缓存的是ProjectDetail实例，子层缓存的是其内部的DetailTab1实例，互不影响
所有被缓存的组件必须声明稳定的 name
KeepAlive 依赖组件的 name 做匹配，不是文件名，也不是路由 path，更不能是匿名组件：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在组件选项中显式写
name: 'ProjectList'，哪怕使用defineComponent或defineAsyncComponent也要补上 - 避免用计算属性或动态拼接生成
name，必须是字符串字面量或常量 - 嵌套路由中的中间布局组件（如空的
Empty.vue或ParentView.vue）如果也被include了，它自己也得有固定name，否则它的子组件无法被正确识别和缓存
用路由 meta 控制缓存开关，更灵活可靠
硬编码 include 数组容易遗漏或耦合过重，推荐通过 route.meta.keepAlive 动态收集：
立即学习“前端免费学习笔记（深入）”；
- 在路由配置中为需缓存的页面添加
meta: { keepAlive: true } - 在布局组件中用计算属性提取：
computed(() => route.matched.filter(r => r.meta.keepAlive).map(r => r.name)) - 这样新增一个缓存页，只需改路由配置，不用动任何模板或逻辑，也天然支持按层级控制（例如只让二级路由缓存，三级不缓存）
状态清理和恢复要用 activated / deactivated
被 KeepAlive 缓存的组件不会反复执行 mounted/unmounted，所以数据获取、滚动定位、表单重置等逻辑不能写在 onMounted 里：
- 首次加载或需要刷新时，放在
onActivated中，配合route.meta.isBack或sessionStorage标记判断是否真要重新拉数据 - 离开当前缓存页但未销毁时（比如切到其他 tab），用
onDeactivated保存临时状态，比如scrollTop、搜索条件、编辑草稿 - 避免在
onUnmounted里做清理——它可能根本不会被调用；真正需要释放资源的场景（如定时器、事件监听），应在onDeactivated中处理
