1.首先得清楚乡洼，在啟用keep-alive時崇裁，會增加哪些生命周期函數(shù)。
activated（當(dāng)頁面緩存束昵，進(jìn)入時） , deactivated（當(dāng)頁面緩存拔稳，離開時）
2.在項目當(dāng)中我們主要用到的還是activated，deactivated多數(shù)時候用不上妻怎。
3.模擬場景壳炎，有3個頁面，home主頁逼侦，list列表頁匿辩，detail詳情頁
用戶有以下操作：
1.從 home->list->detail
2.從 home->detail->list
4.這種場景中對應(yīng)的頁面操作，如下：
//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铲球，為路由加上緩存標(biāo)志
{
path: 'list', //開票管理
component: List,
meta:{
keepAlive:true,//需要緩存的頁面
isFresh:false,//是否刷新頁面
scrollTop: 0,//緩存時，當(dāng)前頁面的高度
}
}
//List.vue晰赞，設(shè)置緩存時的操作
//data中有如下數(shù)據(jù)
data() {
return {
page: 1,
total: 0,
listData: []
}
},
//一般數(shù)據(jù)在created中請求稼病，但是如果頁面緩存了就放在activated中
activated(){
let meta = this.$route.meta;
if(meta.isFresh || !this.listData.length){//允許刷新操作 或者 主頁->詳情頁->列表頁 時，
this.page = 1;//將page更新為初始值
meta.isFresh = false;
this.getListData();//請求數(shù)據(jù)
}else {//詳情頁緩存掖鱼，跳到之前的高度
this.$nextTick(()=>{
window.scrollTo(0,meta.scrollTop)
})
}
},
//我們需要在當(dāng)頁的鉤子函數(shù)中然走，加上操作
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數(shù)組清空
this.listData = []
}
next()
},
5.如有疑問芍瑞，可提
