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

Question

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

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

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

我应该将每个 products 视图放入一个单独的组件中吗？

原文由 okwme 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要在路由器视图中使用 keep-alive，您应该像这样在视图路由器上使用唯一密钥：

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

不要忘记在 keep alive 上使用 max 属性以防止内存开销

<keep-alive max="5">

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

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

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

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

原文由 Mohsen 发布，翻译遵循 CC BY-SA 4.0 许可协议