vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽物理返回操作

更新時(shí)間：2020年08月06日 11:01:40 作者：Mr.mmming

這篇文章主要介紹了vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽物理返回操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

最近開發(fā)vue項(xiàng)目，遇到的一些問題，這里整合一下，看到一些博客已經(jīng)有寫相關(guān)知識(shí)，然后自己再次記錄一下。

這是關(guān)于vue路由相關(guān)比較常見的問題，以后遇到相關(guān)路由的問題，會(huì)不斷更新這篇博客。

需求1：從填寫表單A頁(yè)面跳轉(zhuǎn)到B頁(yè)面，然后再?gòu)腂頁(yè)面返回到A頁(yè)面，實(shí)現(xiàn)A頁(yè)面的所填的數(shù)據(jù)保留

一.設(shè)置路由緩存：

1.App.vue中加入<keep-alive> 具體代碼如下：

<template>
 <div id="app">
 <!--<img src="./assets/logo.png">-->
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive">
  <!-- 這里是會(huì)被緩存的視圖組件A -->
  </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
  <!-- 這里是不被緩存的視圖組件B -->
 </router-view>
 </div>
</template>

2.在路由配置文件index.js里面增加meta標(biāo)簽，代碼如下：

export default new Router({
 routes: [
 {
  path: '/',
  name: 'Initinfo',
  component: Initinfo
 },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }

 ]
})

ok，做到這里，就能實(shí)現(xiàn)以上需求1。

需求2：在需求1基礎(chǔ)上，增加一個(gè)需求就是，緩存A表單頁(yè)面滾動(dòng)位置，代碼如下：

export default new Router({

 //使用keep-alive后，可能存在滾動(dòng)條問題的解決問題
 mode:'hash',//默認(rèn)是hash模式 且有history
 scrollBehavior(to,from,savePosition) { // 在點(diǎn)擊瀏覽器的“前進(jìn)/后退”，或者切換導(dǎo)航的時(shí)候觸發(fā)。
  console.log(to) // to：要進(jìn)入的目標(biāo)路由對(duì)象，到哪里去
  console.log(from) // from：離開的路由對(duì)象，哪里來(lái)
  console.log(savePosition) // savePosition：會(huì)記錄滾動(dòng)條的坐標(biāo)，點(diǎn)擊前進(jìn)/后退的時(shí)候記錄值{x:?,y:?}
  if(savePosition){
   return savePosition;
  }else{
   return {
    x: 0,
    y: 0
   }
  }
 },
 routes: [
  {
   path: '/',
   name: 'Initinfo',
   component: Initinfo
  },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }

 ]
})

需求3：

1.默認(rèn)顯示 A

2. B跳到 A，A 不刷新

3. C跳到 A，A 刷新

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

以上是路由守衛(wèi)官網(wǎng)，可以參考，下面介紹兩個(gè)守衛(wèi)：beforeRouteLeave,beforeRouteEnter

1.在路由的index.js文件，和以上路由一樣，設(shè)置A頁(yè)面的meta屬性，代碼如下：

{
 path: '/A',
 name:'A',
 component: ASeal,
 meta:{keepAlive:true}
 }

2. 在B組件設(shè)置 beforeRouteLeave：代碼如下：

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 設(shè)置下一個(gè)路由的 meta
  to.meta.keepAlive = true; // 讓 A 緩存，即不刷新
  next();//確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved
 }
};

3.在C組件設(shè)置 beforeRouteLeave：代碼如下：

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 設(shè)置下一個(gè)路由的 meta
  to.meta.keepAlive = false; // 讓 A不緩存，即刷新
  next();//確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved
 }
};

ok，以上代碼即可滿足需求3

需求4：

　　 1.A-->B-->C-->D 從A頁(yè)面依次進(jìn)入BCD頁(yè)面，現(xiàn)在我要在D頁(yè)面點(diǎn)擊返回（手機(jī)或者瀏覽器物理返回鍵）回到A頁(yè)面

　　 2.A-->E-->D 從A頁(yè)面一次進(jìn)入ED頁(yè)面，現(xiàn)在我在D頁(yè)面點(diǎn)擊返回（手機(jī)或者瀏覽器物理返回鍵）回到E頁(yè)面

以上的需求總結(jié)來(lái)說(shuō)就是，根據(jù)不同的渠道進(jìn)入D頁(yè)面的時(shí)候，當(dāng)點(diǎn)擊返回的時(shí)候，進(jìn)入不同的頁(yè)面

1.首先我在入口main.js里面聲明了一個(gè)全局變量（當(dāng)然你可以按照自己的方式去聲明一個(gè)變量）

global.beforeRouteName = ""; 　　

2.然后在D組件中，聲明路由守衛(wèi)：beforeRouteEnter,代碼如下：

剛進(jìn)入該組件時(shí)，便會(huì)進(jìn)入beforeRouteEnter,在此先賦值：

 beforeRouteEnter(to,from,next){
  global.beforeRouteName = from.name; //給全局變量賦值
  next();
 },

然后在mounted里面判斷瀏覽器是否支持popstate

mounted(){
 //判斷瀏覽器是否支持popstate
 if(window.history && window.history.pushState){
  history.pushState(null,null,document.URL);
  window.addEventListener('popstate',this.goBack,false);
 }
 }

其次在methods里面寫goBack方法，代碼如下：

goBack(){
 if(global.beforeRouteName == "C"){  //判斷，當(dāng)獲取上個(gè)頁(yè)面進(jìn)來(lái)的路由是C的時(shí)候，返回到A頁(yè)面
  this.$router.push({name:'A'}); 
 }else if(global.beforeRouteName == "E"){　　//判斷，當(dāng)獲取上個(gè)頁(yè)面進(jìn)來(lái)的路由是E的時(shí)候，返回上一頁(yè)
  history.go(-1);
 }else{
  this.$router.push({name:'A'}); //判斷，當(dāng)有其他返回值的時(shí)候，默認(rèn)返回到A頁(yè)面（這個(gè)隨意設(shè)置，一般不會(huì)有這種情況）
 }
 }

最后一定不要忘記：在destroyed要取消監(jiān)聽，不然這個(gè)監(jiān)聽一直存在，代碼如下：

destroyed(){
 window.removeEventListener('popstate',this.goBack,false);
}

到此需求4就解決了。

剛剛看了下代碼，其實(shí)路由守衛(wèi)做這個(gè)返回控制其實(shí)更簡(jiǎn)單。只要好好使用beforeRouteLeave這個(gè)守衛(wèi)就能簡(jiǎn)單解決以上問題

補(bǔ)充知識(shí)：vue 使用路由守衛(wèi)監(jiān)聽返回鍵，控制頁(yè)面跳轉(zhuǎn)

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

 beforeRouteLeave(to, from, next) {
  // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
  // 可以訪問組件實(shí)例 `this`
  if(!this.isPublish){
   this.confirmVisible=true
   next(false)//不放行
  }else {
   next()
  }
 
 },

以上這篇vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽物理返回操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: