我的项目是Vue 3，Vue Router 4，我使用脚本设置。
我有一个报告页面在我的路线中指定这样。js：

{
      path: '/reporting',
      name: 'reporting',
      component: () => import('../views/reporting/Reporting.vue')
    },

在这个报告。vue，有很多子组件NamedModule。这些模块中的每一个都调用一个API来提取它们的相关数据。所有模块都链接到各自的详细信息页面。然后，用户可以在查看特定模块的详细信息后返回到“报告”页面。
但是这些API调用运行时间相当长，所以我希望所有NamedModules只在第一次加载报告页面时调用它们的api，而不是每次我转到详细信息页面然后返回报告页面时。vue页面
我正在尝试使用Vue内置的KeepAlive组件来实现这一点。但是，我发现它在直接应用于Reporting上的组件时并不起作用。像这样看：

<keep-alive>
    <NamedModule/>
 </keep-alive>

它的工作原理是，当导航到onActivated时，它会被触发--但它不会缓存，并且每次用户返回到Reporting时，组件仍然会挂载。查看详情页面。
因此，我尝试在router-view上使用keep-alive，然后直接包含我想要缓存的NamedModule组件，就像这样（我使用脚本设置，所以指定了文件名-ex：CarModule.vue-组件的）：

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

但是，这似乎没有任何效果，现在组件不再检测onActivated事件。
有人对如何修复/正确实现KeepAlive来缓存特定组件有什么建议吗？