vue keep-alive实现不缓存某些页面和只缓存某些页面

最新推荐文章于 2023-12-18 11:38:10 发布

转载最新推荐文章于 2023-12-18 11:38:10 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/baixiaoxiao/p/10639631.html

文章标签：

#vue.js

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Vue中<keep-alive>组件的用法，包括如何通过include属性指定需要缓存的组件名称，利用正则表达式进行动态缓存，以及通过exclude属性排除不想缓存的组件。同时展示了动态组件与<keep-alive>结合使用的方式，以及如何根据条件动态决定哪些组件应该被缓存。

参考：https://www.cnblogs.com/baixiaoxiao/p/10639631.html

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>