溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
最近蒸煮在做一個獨立項目的時候遇到了一個小坑，特此做個爬坑紀念。
基本情景是頁面之間通過vue路由跳轉，從頁面A跳轉到頁面B（在頁面B進行對應操作后）,再從頁面B跳轉到頁面C。之后再從頁面C返回到頁面B，頁面B保留之前狀態，返回頁面A，頁面B狀態不保留。(｡･∀･)ﾉﾞ嗨~感覺說的好亂。
總之就是，前進刷新，后退不刷新（刷新是指是否重新渲染）
相信很多小伙伴都會想到用keep-alive開啟緩存頁面來實現，鵝，蒸煮也沒例外，下面就是蒸煮的爬坑過程。
vue路由開啟keep-alive緩存頁面
keep-alive是vue官方提供的一種緩存組件實例的方法。
第一步，先改寫<router-view>的展示方式
<keep-alive> //這是會被緩存的頁面 <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,//不緩存
}
}]
這樣的話無論什么時候，緩存的組件一直會被緩存
第三步，根據路由鉤子來改變緩存組件的狀態
beforeRouteLeave(to, from, next) {
if(to.path="首頁"){
from.meta.keepAlive =false;
}else if(to.path="詳情頁"){
from.meta.keepAlive = true;
} // 跳轉到 首頁時，不緩存，跳轉到詳情頁時緩存（就是不刷新）
next();
}
這種行嗎？行嗎？行嗎？不行！！因為第一次的時候確實會成功，可是退出去以后就gg了，
因為keepAlive已經變成了false,第二次就不會緩存。那么第一個頁面加下面代碼，讓他進入的時候
beforeRouteLeave(to, from, next) {
if(to.path=="/searchMain"){
to.meta.keepAlive =true;
}
next(true);
return;
},
實踐證明，搜索界面的數據一直是第一次緩存過的數據。
二，為了解決這個問題，蒸煮想起了keep-alive組件相關的兩個鉤子函數。
activated:緩存的組件再次進入時觸發；
deactivated:緩存的組件離開時會觸發；
第一次進入keep-alive組件時，其生命周期執行順序：
beforeRouteEnter ->created ->mounted ...->activated ->deactivated
非首次進入時，其生命周期執行順序
beforeRouteEnter ->activated ->deactivated
第二次進入的時候vue組件的生命周期函數都沒有執行，說明緩存組件也無法銷毀。更無法更新。
解決方法
activated() {
if(!this.$route.meta.isBack) {
// 如果isBack是false，表明需要獲取新數據，否則就不再請求，直接使用緩存的數據 this.getData(); // ajax獲取數據方法
}
// 恢復成默認的false，避免isBack一直是true，導致下次無法獲取數據
this.$route.meta.isBack = false
},
但素，重新換取數據，之前保存在data里的數據并沒有變，感覺還是不太徹底！
終極解決方案
最后終于到答案的最后一步啦那
就是動態給要緩存的路由組件添加key值啦~
<keep-alive> <router-view v-if="$route.meta.keepAlive" :key='key'></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive" :key='key'></router-view>
在vuex中有條件改變key的值
beforeRouteLeave(to,from,next){
if(to.path=="/"){
this.$store.commit("UPDATE_KEY",this.$route.name!==undefined?this.$route.name+
+new Date():this.$route+ +new Date());
}
}
這樣的話就會有一個很重要的問題，這些緩存過的組件，都是在內存中的，如果一直操作，內存堆積越來越大，導致系統卡頓。所以離開時就銷毀吧
手動觸發銷毀
beforeRouteLeave(to,from,next){
if(to.path=="/"){
this.$store.commit("UPDATE_KEY",this.$route.name!==undefined?this.$route.name+ +new Date():this.$route+ +new Date());
this.$destroy();//銷毀吧
}
結語：寫完了，希望能夠供大家參考哦！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
