1.在使用keepAlive緩存是發(fā)現(xiàn)遇到的坑食侮，現(xiàn)有A-B-C三個(gè)頁(yè)面（A首頁(yè)号涯，B列表頁(yè)，C詳情頁(yè)）锯七，從A到B刷新链快，C退回到B不刷新，這里是使用的結(jié)合router來(lái)實(shí)現(xiàn)的眉尸。
2.最開(kāi)始的做法在app里面
<div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
在router路由里面設(shè)置需要緩存的組件的keepAlive:true
{
path: "/B",
name: "B",
component:B,
meta: { title: "列表頁(yè)",keepAlive:true }
},
3.從A進(jìn)入到B頁(yè)面時(shí)設(shè)置B頁(yè)面的meta.keepAlive==flase域蜗，讓B頁(yè)面刷新。
beforeRouteLeave(to, from, next) {
if (to.name == "B") {
to.meta.keepAlive = false;
}
next();
},
4.從C頁(yè)面返回的B時(shí)設(shè)置B的meta.keepAlive==true,讓B頁(yè)面緩存(不刷新)
beforeRouteLeave(to, from, next) {
if (to.name == "B") {
to.meta.keepAlive = true;
}
next();
},
5.后面發(fā)現(xiàn)這樣有一個(gè)問(wèn)題噪猾，首次A進(jìn)入B時(shí)B的keepAlive為false進(jìn)入C頁(yè)面時(shí)B的keepAlive為true霉祸，所以首次C退回到B時(shí)，B頁(yè)面也會(huì)刷新袱蜡。
導(dǎo)致的原因是因?yàn)楫?dāng)引入keep-alive 的時(shí)候它的值為true時(shí)丝蹭，頁(yè)面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated坪蚁，退出時(shí)觸發(fā)deactivated奔穿。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)镜沽，只觸發(fā)activated。所以會(huì)導(dǎo)致C第一次進(jìn)入B的時(shí)候會(huì)刷新贱田。
最后解決方案
修改A頁(yè)面的beforeRouteLeave替換為beforeRouteEnter當(dāng)B進(jìn)入A的時(shí)候修改B的keepAlive缅茉，這樣的話，首次A進(jìn)入B的時(shí)候keepAlive為true男摧，執(zhí)行created-> mounted-> activated蔬墩，C首次退回的時(shí)候就不會(huì)刷新了。
beforeRouteEnter(to, from, next) {
if (from.name == "B") {
from.meta.keepAlive = false;
}
next();
},
