Vue路由视图下仅保持指定组件存活的实现问题

问题核心在于混淆了路由级组件缓存和组件内部子组件缓存的作用范围：

• App.vue里的<keep-alive>负责缓存router-view渲染的路由组件（即HomeView），当你设置include="HomeView"时，整个HomeView实例会被完整缓存，它内部的所有子组件状态都会被保留，这就导致DeadComponent也被意外缓存了。
• 而include="AliveComponent"无效，是因为AliveComponent是HomeView的子组件，并非路由直接渲染的组件，App层面的<keep-alive>无法管控路由组件内部的子组件缓存逻辑。

正确实现步骤 #

1. 取消App.vue对HomeView的缓存
   根据你的路由缓存需求选择对应方案：

   <!-- App.vue -->
   <template>
     <div id="app">
       <!-- 方案1：如果没有其他路由需要缓存，直接移除keep-alive -->
       <router-view />
   
       <!-- 方案2：如果有其他路由需要缓存，仅指定这些路由组件 -->
       <!-- <keep-alive include="OtherCachedView">
         <router-view />
       </keep-alive> -->
   
       <!-- 方案3：直接排除HomeView，其他路由自动缓存 -->
       <!-- <keep-alive exclude="HomeView">
         <router-view />
       </keep-alive> -->
     </div>
   </template>
   

2. 在HomeView内部单独缓存AliveComponent
   只给需要保持存活的组件套上<keep-alive>，DeadComponent直接裸渲染：

   <!-- HomeView.vue -->
   <template>
     <div class="home-container">
       <!-- 仅缓存AliveComponent -->
       <keep-alive>
         <AliveComponent />
       </keep-alive>
   
       <!-- DeadComponent不缓存，每次进入首页都会重新实例化 -->
       <DeadComponent />
     </div>
   </template>
   

额外注意点 #

如果后续需要在HomeView内部用include精准匹配缓存组件，确保AliveComponent的name选项正确设置：

// AliveComponent.vue
export default {
  name: 'AliveComponent', // 名称需与keep-alive的include值完全一致
  // ...组件逻辑
}

这样就能实现仅让AliveComponent保持存活状态，DeadComponent每次进入首页都会重新创建的需求。

内容的提问来源于stack exchange，提问作者blackcityhenry