介绍
-
keep-alive是vue2.x提供的组件，用来缓存组件，避免多次加载组件来减少性能消耗。
使用
- keep-alive可以配合路由的meta属性添加对应参数来判断是否缓存组件。使用例子:
// router.js 部分
{
path:'/list',
name:'list',
meta:{
keepAlive:true
}
}
// app.vue 部分
<keep-alive>
<router-view v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$router.meta.keepAlive"></router-view>
按照以上方式，被缓存的组件就会在keep-alive组件中视图中展示，路由中，meta没有设置keepAlive或者keepLive为false的，就在显示keep-alive组件外的视图中。不会被缓存。
应用场景
- 列表页面A，可以下拉加载，当我下拉到对应列时，点击该列，进入详情B页面，再从详情B页面返回列表页面A，需回到我才下拉时的对应列表。再冲列表页面A进入新增列表页面C，新增一条列表，返回列表页面A刷新，获取最新的新增数据。
实现方式
- 缓存的写法与上面一致，不需要改动，在A页面的路由meta参数中加上keepAlive:true。
// 页面路由定义
{
path:'/A',
meta:{
keepAlive:true,
isBack:false
}
},
{
path:'/B',
meta:{
}
},
{
path:'/C',
meta:{
}
}
// app.vue页面
<keep-alive>
// A页面会被缓存
<router-view v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
// B,C页面不会被缓存
<router-view v-if="!$router.meta.keepAlive"></router-view>
// A.vue页面监听activated钩子函数（当被keep-alive缓存组件缓存的页面，会多出两个一个钩子函数，一个activated:组件被激活时，deactivated:组件被停用时）
activated(){
if(!this.$router.meta.isBack){//判断返回的页面是否需要A页面进行缓存，如果不需要，就清空列表，重新请求
this.list=[];
this.getList()
}
}
// B页面监听离开路由钩子函数,是否是从A页面过来，如果是，把A路由的meta中的isBack改成true
beforeRouteLeave(to,from,next){
if(from.path=='/A'){
from.meta.isBack=true
}
next();
}
// C页面监听离开路由钩子函数,是否是从A页面过来，如果是，把A路由的meta中的isBack改成false
beforeRouteLeave(to,from,next){
if(from.path=='/A'){
from.meta.isBack=false
}
}
