keep-alive原理:
将组件的name与路由的name值进行匹配,匹配上了,即对组件进行缓存。
缓存的页面,在切换时不会发数据请求。
include 和 exclude prop 允许组件有条件地缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
缓存使用的场景
比如:
1、tab切换时,想要缓存一个tab页的内容。
2、查询列表页面,想要缓存查询结果。
不建议:
对新增的页面进行缓存。因为新增页面可能多个,缓存会导致页面的数据一致,而不是重新打开一个新页面。
使用例子:
// 和 `<transition>` 一起使用,单个组件
<transition>
<keep-alive :include="compNameArr" >
<component :is="view"></component>
</keep-alive>
</transition>
data(){
compNameArr: ['HelloWorld', 'b'], // 组件名的数组
}
// 使用路由时的写法
<transition name="move" mode="out-in">
<keep-alive :include="compNameArr" >
<router-view></router-view>
</keep-alive>
</transition>
!!! 注意确保组件与路由有name名
!!! 注意确保组件与路由有name名
!!! 注意确保组件与路由有name名
eg:
HelloWorld.vue
<script>
export default{
name:"HelloWorld",
}
</script>
router/index.js
{
name:"HelloWorld",
path:"/HelloWorld",
component:()=>import('@/components/HelloWorld.vue'),
}
参考vue官网:https://cn.vuejs.org/v2/api/#keep-alive
惟求热泪盈眶与成就感 _