快捷導(dǎo)航

vue路由中前進(jìn)后退的一些事兒

更新時(shí)間：2019年05月18日 09:11:52 作者：?jiǎn)贪筒幌胝f話

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

前言

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

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

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

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

vue路由開啟keep-alive緩存頁面

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

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

<keep-alive>
//這是會(huì)被緩存的頁面
 <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,//不緩存 
    } 
   }]

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

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

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

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

二，為了解決這個(gè)問題，蒸煮想起了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ù)都沒有執(zhí)行，說明緩存組件也無法銷毀。更無法更新。

解決方法

 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)致下次無法獲取數(shù)據(jù)
 this.$route.meta.isBack = false
},

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

終極解決方案

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

就是動(dòng)態(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());
 }
}

這樣的話就會(huì)有一個(gè)很重要的問題，這些緩存過的組件，都是在內(nèi)存中的，如果一直操作，內(nè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é)語：寫完了，希望能夠供大家參考哦！

總結(jié)

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

您可能感興趣的文章: