Vue 2 <keep-alive> 不适用于 <router-view> 和 key

Question

我将 vue-router 与一系列组件（如选项卡）一起使用。每个<router-link>都是一个选项卡，下面的空间是<router-view>. 其中两个选项卡是具有不同过滤器的相同组件，假设它们是products并且路由器添加了用于过滤的参数：/products/new& /products/sale。

里面products是单独的product组件，当路由打开时它们会被安装。我的问题是，当我在路由之间切换并且更改过滤器参数时，product每次都会重新安装组件。我想缓存它们，以便来回切换更容易。为此，我设置<keep-alive>并添加:key='$route.fullPath'到我的<router-view>但它们似乎没有被缓存。每个product仍烧成mounted()事件，当我之间进行切换products。

<keep-alive>
  <router-view :key='$route.fullPath'></router-view>
</keep-alive>

我应该将每个products视图变成一个单独的组件吗？

Answer 1

要在路由器视图中使用 keep-alive，您应该在视图路由器上使用唯一键，如下所示：

 <keep-alive>
   <router-view :key="$route.fullPath"></router-view> 
 </keep-alive>

不要忘记在保持活动时使用 max 属性以防止内存开销

<keep-alive max="5">

或者只包含想要缓存的组件：

<keep-alive include="FirstComp,SecondComp"> 

对于组件内的每个组件，如果你想要缓存，你需要让它们保持活动状态

<keep-alive>
  <product></product>
</keep-alive>

Answer 2

Vue 3 - 工作示例

当我尝试上面的解决方案（在 Vue 3 中）时，我在控制台中得到了这个

[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:

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

所以我像这样将其复制到 App.vue 中......

[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:

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

它有效:)

Answer 3

我不认为你能够router-view使用缓存keep-alive。来自以下文档keep-alive：

keep-alive 不适用于功能组件，因为它们没有要缓存的实例。

并且router-view是一个功能组件，来自文档：

该组件是一个功能组件，它为给定路径呈现匹配的组件。

为了使其工作，您需要在内部有动态组件keep-alive，如下所示：

<keep-alive>
  <products ></products>
</keep-alive>