Vue3+VueRouter4中如何用KeepAlive缓存子组件避免重复API请求

针对你遇到的报表页子组件重复调用API的问题，先理清你之前尝试失效的核心原因：

• 直接在Reporting里包裹子组件：跳转到详情页时，Reporting作为路由组件会被卸载，子组件的缓存随之清除，返回时自然重新挂载。
• 在router-view上指定子组件name：router-view里的keep-alive只缓存路由级组件，你的NamedModule是Reporting的子组件，并非路由组件，所以include无法匹配。

方案一：缓存整个报表路由组件（简单直接） #

1. 给Reporting.vue声明组件name
   script-setup语法需要用defineOptions显式声明name：

   <script setup>
   defineOptions({
     name: 'Reporting'
   })
   // 其他业务逻辑
   </script>
   

2. 在App.vue的router-view中配置缓存
   把keep-alive放在router-view外层，指定缓存Reporting组件：

   <router-view v-slot="{ Component }">
     <keep-alive include="Reporting">
       <component :is="Component" />
     </keep-alive>
   </router-view>
   

   这样从详情页返回/reporting时，Reporting组件不会重新挂载，里面的子组件状态完全保留，API只会在首次加载时执行。

3. 子组件API调用放在onMounted
   子组件（如CarModule.vue）的API请求写在onMounted钩子中，缓存后该钩子仅执行一次：

   <script setup>
   import { onMounted } from 'vue'
   
   onMounted(() => {
     // 调用API获取数据
     fetchCarReportData()
   })
   </script>
   

方案二：用子路由实现局部缓存（不缓存整个报表页） #

如果不想缓存整个Reporting组件，仅缓存内部子组件，可以把详情页设为Reporting的子路由，这样跳转详情页时Reporting不会卸载，子组件的缓存才会生效。

1. 修改路由配置，添加子路由

   const routes = [
     {
       path: '/reporting',
       name: 'reporting',
       component: () => import('../views/reporting/Reporting.vue'),
       children: [
         {
           path: 'detail/:id',
           name: 'reportDetail',
           component: () => import('../views/reporting/ReportDetail.vue')
         }
       ]
     }
   ]
   

2. 在Reporting.vue中添加子路由出口并缓存子组件
   保留子组件的同时，新增<router-view>渲染详情页：

   <template>
     <!-- 缓存所有子组件 -->
     <keep-alive>
       <CarModule />
       <UserModule />
       <!-- 其他NamedModule组件 -->
     </keep-alive>
   
     <!-- 子路由出口，展示详情页 -->
     <router-view />
   </template>
   

   如果需要精准缓存部分子组件，给目标子组件设置name后，用include指定：

   <!-- CarModule.vue -->
   <script setup>
   defineOptions({
     name: 'CarModule'
   })
   </script>
   

   然后修改keep-alive：

   <keep-alive include="CarModule,UserModule">
     <CarModule />
     <UserModule />
   </keep-alive>
   

3. 子组件API调用逻辑
   同样把API请求放在onMounted中，首次加载执行，返回时因为组件被缓存，不会重复调用。

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