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這個守衛就能簡單解決以上問題