关键在于分层包裹keepalive、组件显式命名及路由meta动态控制缓存：父级缓存projectlist等，子级缓存detailtab1等；name必须是字符串字面量；用route.meta.keepalive动态收集缓存列表；状态管理应使用onactivated/ondeactivated而非onmounted/onunmounted。
Vue 嵌套路由配合 KeepAlive 缓存多级页面，关键不是“全包”，而是“分层包裹 + 精准命名 + 动态控制”。缓存失效、状态丢失、onMounted 多次触发等问题，几乎都源于 KeepAlive 没有落在正确的 <router-view></router-view> 层级，或子组件缺少稳定 name。
只在需要缓存的 router-view 上套 KeepAlive
不要在最外层 Layout 中用一个 KeepAlive 包住全部路由。嵌套路由是树状结构，每一级 <router-view></router-view> 都是独立出口，缓存也必须逐层配置：
- 父路由组件（如
ProjectLayout.vue）中，只对它的直接子<router-view></router-view>使用<keepalive></keepalive>，并用:include明确指定要缓存的子路由组件名（如['ProjectList', 'ProjectDetail']） - 子路由组件（如
ProjectDetail.vue）如果自己还有<router-view></router-view>（比如展示多个 tab 或子模块），那就再在它内部单独加一层<keepalive></keepalive>，缓存它的子组件（如['DetailTab1', 'DetailTab2']） - 每层的
KeepAlive相互独立：父层缓存的是ProjectDetail实例，子层缓存的是其内部的DetailTab1实例，互不影响
所有被缓存的组件必须声明稳定的 name
KeepAlive 依赖组件的 name 做匹配，不是文件名，也不是路由 path，更不能是匿名组件：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章