Question

我正在使用带有一系列组件的vue-router，例如制表符。每个<router-link>都是一个标签，下面的空格是<router-view>。其中两个选项卡是具有不同过滤器的相同组件，假设它们是products，并且路由器添加了用于过滤的参数：/products/new＆amp; /products/sale。

products内部是单个product组件，在打开路径时会挂载。我的问题是，当我在路由之间切换，并且filter参数被更改时，每次都会重新装入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

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 中...

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

它有效:)

Answer 2

我认为您无法使用router-view缓存keep-alive。来自keep-alive的{{3}}：

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

router-view是一个功能组件，来自documentation：

组件是一个功能组件，用于呈现给定路径的匹配组件。

要使其工作，您需要在keep-alive中包含动态组件，如下所示：

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

Answer 3

要在路由器视图中使用保持活动状态，应在视图路由器上使用唯一键，如下所示：

 <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 4

看看我在此处发布的有关vue 2+的内容：

vue.js keep-alive and router-view

如果要根据路由URL交换内容，可以将子代添加到route.js文件中，并以此方式绑定参数。例如，如果您想让组件保持活动状态，但需要更改部分路径中的数据，则可以执行以下操作：

{ 
  path: 'products', component: Products, ...,
  children: [
              { path: 'Overview/:name', props: true, component: Overview },
              { path: 'Overview/:name/:id', props: true, component: Details }
            ]
}

您可以先路由到/ Products，然后说用户单击要路由到/ Products / Overview / Memes的图像或列表，然后用户单击特定的模因就可以路由到/ Products / Overview / Memes / MrPotatoHead，并在马铃薯先生先生或类似的东西上加载组件负载数据。

请务必注意，“产品”组件将保持活动状态，而“子”组件将保持活动状态。即使将子组件模板包装为保持活动状态，它也会被破坏：

destroy nested keep-alive components

Answer 5

仅仅因为您的组件已重新安装并因此在mounted钩子上触发您的功能并不意味着它曾经被破坏。要测试它是否保持活动状态，请在destroyed挂钩上控制台记录一些内容，如果它不触发控制台日志，则keep-alive可以正常工作。我已经运行了相同的代码，并且它似乎至少在Vue 2中有效。

Vue 2 <keep-alive>无法使用<router-view>和密钥

5 个答案:

Vue 3 - 工作示例