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效果相反,但用法相同,这里就不在演示了。
上一篇:Android代码混淆配置:ProGuard


下一篇:vue使用keep-alive保持滚动条位置的实现