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