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

我使用vue-router和一系列组件如标签。每个<router-link>是一个选项卡，下面的空间是<router-view>。其中两个选项卡是具有不同过滤器的相同组件，假设它们是products，并且路由器添加了用于过滤的参数：/products/new & /products/sale。Vue 2 <keep-alive>不适用于<router-view>和键

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视图变成一个单独的组件吗？

来源

2016-11-30 okwme

我不认为你将能够使用keep-alive缓存router-view。从keep-alive的documentation：

保活不与功能部件的工作，因为他们没有实例被缓存。

而且router-view是一个功能部件，从documentation：

该组件是呈现为给定的路径匹配的部件的功能部件。

为了使这项工作，你需要有内部keep-alive活力的组成部分，就像下面：

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

来源

2016-12-01 02:25:56 Saurabh

您好感谢指出了这一点！首先想到的第一个解决方案是删除''，并放回我的动态组件，如： ''这里路由的名称是组件的名称。这在路由方面起作用，但在两个版本之间单击时仍然在重新安装组件：\ – okwme

似乎不再是真实的。引用[路由器文档]（http://router.vuejs.org/en/api/router-view.html）：'因为它只是一个组件，它可以与和一起使用。将两者一起使用时，请务必在内部使用 – oliverpool

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

回答

相关问题