前言

10多年的靖州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整靖州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“靖州網(wǎng)站設(shè)計(jì)”,“靖州網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

最近蒸煮在做一個(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開啟緩存頁(yè)面來(lái)實(shí)現(xiàn)，鵝，蒸煮也沒(méi)例外，下面就是蒸煮的爬坑過(guò)程。

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

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

第一步，先改寫的展示方式

//這是會(huì)被緩存的頁(yè)面
 
 

//這里是不被緩存的組件

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

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,//不緩存 
    } 
   }]

這樣的話無(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:緩存的組件離開時(shí)會(huì)觸發(fā)；

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

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

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

beforeRouteEnter ->activated ->deactivated

第二次進(jìn)入的時(shí)候vue組件的生命周期函數(shù)都沒(méi)有執(zhí)行，說(shuō)明緩存組件也無(wú)法銷毀。更無(wú)法更新。

解決方法

 activated() {
 if(!this.$route.meta.isBack) {
  // 如果isBack是false，表明需要獲取新數(shù)據(jù)，否則就不再請(qǐng)求，直接使用緩存的數(shù)據(jù)  this.getData(); // ajax獲取數(shù)據(jù)方法
 }
 // 恢復(fù)成默認(rèn)的false，避免isBack一直是true，導(dǎo)致下次無(wú)法獲取數(shù)據(jù)
 this.$route.meta.isBack = false
},

但素，重新?lián)Q取數(shù)據(jù)，之前保存在data里的數(shù)據(jù)并沒(méi)有變，感覺(jué)還是不太徹底！

終極解決方案

最后終于到答案的最后一步啦那

就是動(dòng)態(tài)給要緩存的路由組件添加key值啦~

在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());
 }
}

這樣的話就會(huì)有一個(gè)很重要的問(wèn)題，這些緩存過(guò)的組件，都是在內(nèi)存中的，如果一直操作，內(nèi)存堆積越來(lái)越大，導(dǎo)致系統(tǒng)卡頓。所以離開時(shí)就銷毀吧

手動(dòng)觸發(fā)銷毀

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();//銷毀吧
}

結(jié)語(yǔ)：寫完了，希望能夠供大家參考哦！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。