1.首先得清楚,在启用keep-alive
时,会增加哪些生命周期函数。
activated(当页面缓存,进入时) , deactivated(当页面缓存,离开时)
2.在项目当中我们主要用到的还是activated
,deactivated
多数时候用不上。
3.模拟场景,有3个页面,home主页,list列表页,detail详情页
用户有以下操作:
1.从 home->list->detail
2.从 home->detail->list
4.这种场景中对应的页面操作,如下:
//App.vue,配置缓存
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
//router.js,为路由加上缓存标志
{
path: 'list', //开票管理
component: List,
meta:{
keepAlive:true,//需要缓存的页面
isFresh:false,//是否刷新页面
scrollTop: 0,//缓存时,当前页面的高度
}
}
//List.vue,设置缓存时的操作
//data中有如下数据
data() {
return {
page: 1,
total: 0,
listData: []
}
},
//一般数据在created中请求,但是如果页面缓存了就放在activated中
activated(){
let meta = this.$route.meta;
if(meta.isFresh || !this.listData.length){//允许刷新操作 或者 主页->详情页->列表页 时,
this.page = 1;//将page更新为初始值
meta.isFresh = false;
this.getListData();//请求数据
}else {//详情页缓存,跳到之前的高度
this.$nextTick(()=>{
window.scrollTo(0,meta.scrollTop)
})
}
},
//我们需要在当页的钩子函数中,加上操作
beforeRouteEnter(to,from,next){
if(from.path !== '/detail'){//不是从detail页面过来的,需要刷新
to.meta.isFresh = true
}
next()
},
beforeRouteLeave(to,from,next){
if(to.path==='/detail'){
from.meta.scrollTop = document.documentElement.scrollTop||document.body.scrollTop
}else {//不去详情页面时,将缓存的listData数组清空
this.listData = []
}
next()
},
5.如有疑问,可提