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

在使用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效果相反，但用法相同，这里就不在演示了。