前言

最近蒸煮在做一個(gè)獨(dú)立項(xiàng)目的時(shí)候遇到了一個(gè)小坑，特此做個(gè)爬坑紀(jì)念。

基本情景是頁(yè)面之間通過(guò)vue路由跳轉(zhuǎn)，從頁(yè)面A跳轉(zhuǎn)到頁(yè)面B（在頁(yè)面B進(jìn)行對(duì)應(yīng)操作后）,再?gòu)捻?yè)面B跳轉(zhuǎn)到頁(yè)面C。之后再?gòu)捻?yè)面C返回到頁(yè)面B，頁(yè)面B保留之前狀態(tài)，返回頁(yè)面A，頁(yè)面B狀態(tài)不保留。(｡･∀･)ﾉﾞ嗨~感覺(jué)說(shuō)的好亂。

總之就是，前進(jìn)刷新，后退不刷新（刷新是指是否重新渲染）

相信很多小伙伴都會(huì)想到用keep-alive開(kāi)啟緩存頁(yè)面來(lái)實(shí)現(xiàn)，鵝，蒸煮也沒(méi)例外，下面就是蒸煮的爬坑過(guò)程。

vue路由開(kāi)啟keep-alive緩存頁(yè)面

keep-alive是vue官方提供的一種緩存組件實(shí)例的方法。

第一步，先改寫(xiě)<router-view>的展示方式

<keep-alive>//這是會(huì)被緩存的頁(yè)面 <router-view v-if="$route.meta.keepAlive"> </router-view></keep-alive><router-view v-if = "!$route.meta.keepAlive">//這里是不被緩存的組件</router-view>

第二步，在路由配置文件里，配置組件是否被緩存

routes:[ {  path: '/',    name: 'Index',    component: Index,     meta:{     title:"博物館",      keepAlive:false//不緩存    }    },    {    path:'/searchMain',    name:'SearchMain',    component:SearchMain,    meta:{     title:"搜索",     keepAlive:true,//緩存      }    },   {    path:'/collectionDetails',    name:'CollectionDetails',    component:CollectionDetails,    meta:{      title:"藏品詳情",     keepAlive:false,//不緩存     }    }]

這樣的話(huà)無(wú)論什么時(shí)候，緩存的組件一直會(huì)被緩存

第三步，根據(jù)路由鉤子來(lái)改變緩存組件的狀態(tài)

beforeRouteLeave(to, from, next) {   if(to.path="首頁(yè)"){   from.meta.keepAlive =false;  }else if(to.path="詳情頁(yè)"){  from.meta.keepAlive = true;  } // 跳轉(zhuǎn)到 首頁(yè)時(shí)，不緩存，跳轉(zhuǎn)到詳情頁(yè)時(shí)緩存（就是不刷新）   next();  }這種行嗎？行嗎？行嗎？不行！！因?yàn)榈谝淮蔚臅r(shí)候確實(shí)會(huì)成功，可是退出去以后就gg了，因?yàn)閗eepAlive已經(jīng)變成了false,第二次就不會(huì)緩存。那么第一個(gè)頁(yè)面加下面代碼，讓他進(jìn)入的時(shí)候 beforeRouteLeave(to, from, next) {   if(to.path=="/searchMain"){   to.meta.keepAlive =true;    }   next(true);  return; },

實(shí)踐證明，搜索界面的數(shù)據(jù)一直是第一次緩存過(guò)的數(shù)據(jù)。

二，為了解決這個(gè)問(wèn)題，蒸煮想起了keep-alive組件相關(guān)的兩個(gè)鉤子函數(shù)。

activated:緩存的組件再次進(jìn)入時(shí)觸發(fā)；

deactivated:緩存的組件離開(kāi)時(shí)會(huì)觸發(fā)；

第一次進(jìn)入keep-alive組件時(shí)，其生命周期執(zhí)行順序：

beforeRouteEnter ->created ->mounted ...->activated ->deactivated

非首次進(jìn)入時(shí)，其生命周期執(zhí)行順序