vue路由中前進后退的一些事兒

更新時間：2019年05月18日 09:11:52 作者：喬巴不想說話

這篇文章主要給大家介紹了關于vue路由中前進后退的一些事兒，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue路由具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

最近蒸煮在做一個獨立項目的時候遇到了一個小坑，特此做個爬坑紀念。

基本情景是頁面之間通過vue路由跳轉(zhuǎn)，從頁面A跳轉(zhuǎn)到頁面B（在頁面B進行對應操作后）,再從頁面B跳轉(zhuǎn)到頁面C。之后再從頁面C返回到頁面B，頁面B保留之前狀態(tài)，返回頁面A，頁面B狀態(tài)不保留。(｡･∀･)ﾉﾞ嗨~感覺說的好亂。

總之就是，前進刷新，后退不刷新（刷新是指是否重新渲染）

相信很多小伙伴都會想到用keep-alive開啟緩存頁面來實現(xiàn)，鵝，蒸煮也沒例外，下面就是蒸煮的爬坑過程。

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

這樣的話無論什么時候，緩存的組件一直會被緩存

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

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

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

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

activated:緩存的組件再次進入時觸發(fā)；

deactivated:緩存的組件離開時會觸發(fā)；

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

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

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

beforeRouteEnter ->activated ->deactivated

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

解決方法

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

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

終極解決方案

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

就是動態(tài)給要緩存的路由組件添加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());
 }
}

這樣的話就會有一個很重要的問題，這些緩存過的組件，都是在內(nèi)存中的，如果一直操作，內(nèi)存堆積越來越大，導致系統(tǒ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();//銷毀吧
}

結語：寫完了，希望能夠供大家參考哦！

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: