vue中keep-alive两个属性的用法及注意问题

2020-12-13 15:34:08 阅读：986 来源： 互联网

标签：缓存 name alive keep vue 组件 exclude include 属性

在使用keep-alive时我们只想让其中一个组件缓存，另一个不会缓存。怎么办呢？？？

因此为keep-alive提供了两个属性：

include 值为字符串或者正则表达式匹配的组件name会被缓存。
exclude 值为字符串或正则表达式匹配的组件name不会被缓存。
exclude属性比 include属性优先级更高。

请注意： include和exclude两个属性匹配的是组件中的name名称，而不是路由中的name名称。

  <keep-alive include="Home">
      <router-view/>
  </keep-alive>

<template>
  <div>
    巴拉巴拉巴拉。。。。。
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

{
   path: '/home',
   name: 'home',
   component: () => import('../views/home.vue')
},

如果想缓存多个组件可以这样写。

<keep-alive include="Home,Search,Index">
      <router-view/>
</keep-alive>

用逗号隔开即可。

exclude与include效果相反，但用法相同，这里就不在演示了。

标签：缓存,name,alive,keep,vue,组件,exclude,include,属性
来源： https://blog.csdn.net/Mayongquan/article/details/111114964

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue中keep-alive两个属性的用法及注意问题