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

if时光重来

于 2022-03-22 11:53:37 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

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

vue 专栏收录该内容

34 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：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>