vue 路由緩存 路由嵌套 路由守衛 監聽物理返回

最近開發vue項目，遇到的一些問題，這里整合一下，看到一些博客已經有寫相關知識，然后自己再次記錄一下。

這是關於vue路由相關比較常見的問題，以后遇到相關路由的問題，會不斷更新這篇博客。

 

需求1：從填寫表單A頁面跳轉到B頁面，然后再從B頁面返回到A頁面，實現A頁面的所填的數據保留

一.設置路由緩存：

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

　　

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

 

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

　　

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，做到這里，就能實現以上需求1。

 

需求2：在需求1基礎上，增加一個需求就是，緩存A表單頁面滾動位置，代碼如下：

export default new Router({

    //使用keep-alive后，可能存在滾動條問題的解決問題
    mode:'hash',//默認是hash模式   且有history
    scrollBehavior(to,from,savePosition) { // 在點擊瀏覽器的“前進/后退”，或者切換導航的時候觸發。
        console.log(to) // to：要進入的目標路由對象，到哪里去
        console.log(from) // from：離開的路由對象，哪里來
        console.log(savePosition) // savePosition：會記錄滾動條的坐標，點擊前進/后退的時候記錄值{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.默認顯示 A

　　2. B跳到 A，A 不刷新

　　3. C跳到 A，A 刷新

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

　　以上是路由守衛官網，可以參考，下面介紹兩個守衛：beforeRouteLeave,beforeRouteEnter

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

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

      2. 在B組件設置 beforeRouteLeave：代碼如下：

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

　　3.在C組件設置 beforeRouteLeave：代碼如下：

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

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

需求4：

　　1.A-->B-->C-->D   從A頁面依次進入BCD頁面，現在我要在D頁面點擊返回（手機或者瀏覽器物理返回鍵）回到A頁面

　　2.A-->E-->D  從A頁面一次進入ED頁面，現在我在D頁面點擊返回（手機或者瀏覽器物理返回鍵）回到E頁面

       以上的需求總結來說就是，根據不同的渠道進入D頁面的時候，當點擊返回的時候，進入不同的頁面

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

global.beforeRouteName = "";

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

　　剛進入該組件時，便會進入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"){     //判斷，當獲取上個頁面進來的路由是C的時候，返回到A頁面
       this.$router.push({name:'A'});    
    }else if(global.beforeRouteName == "E"){　　//判斷，當獲取上個頁面進來的路由是E的時候，返回上一頁
       history.go(-1);
    }else{
       this.$router.push({name:'A'});   //判斷，當有其他返回值的時候，默認返回到A頁面（這個隨意設置，一般不會有這種情況）
    }
 }

　　最后一定不要忘記：在destroyed要取消監聽，不然這個監聽一直存在，代碼如下：

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

　到此需求4就解決了。

　剛剛看了下代碼，其實路由守衛做這個返回控制其實更簡單。只要好好使用beforeRouteLeave這個守衛就能簡單解決以上問題