Vue2.0 Router 導航守衛

vue-router 提供的導航守衛主要用來經過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程當中：全局的, 單個路由獨享的, 或者組件級的。

官方文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

全局守衛

可使用 router.beforeEach 註冊一個全局前置守衛：

例如: 判斷在用戶未登陸時, 跳轉到 "/login" 的路由,  登陸時,直接跳轉到默認路由

 

const router = new VueRouter({ ... }) // 實例化 router

router.beforeEach((to, from, next) => {
  console.log(to); // 即將進入的路由
  console.log(from); // 即將離開的路由(當前路由)
  let token = window.sessionStorage.getItem("token")
  if( token){
    to.path === "/login" ? next({ path: '/' }) : next();
  }else {
    to.path !== "/login" ? next("/login") : next() ;
  }
})

 

下面是官方文檔對於參數說明:

每一個守衛方法接收三個參數：

• to: Route: 即將要進入的目標 路由對象

• from: Route: 當前導航正要離開的路由

• next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

  • next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

  • next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。你能夠向 next 傳遞任意位置對象，且容許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

  • next(error): (2.4.0+) 若是傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。

　　確保要調用 next 方法，不然鉤子就不會被 resolved。

 

全局解析守衛

在 2.5.0+ 你能夠用 router.beforeResolve 註冊一個全局守衛。這和 router.beforeEach 相似，區別是在導航被確認以前，同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用。

 

路由獨享的守衛

在路由配置中屬性 beforeEnter

const router = new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/test',
      name: 'test',
      component: () =>  import("@/view/test"),
      beforeEnter: (to, from, next) => {
        console.log('獨享的守衛');
        next();
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log("全局守衛");
  next();
})

同時存在全局守衛和再執行路由獨立守衛時,執行的結果是:

 先執行全局守衛,再執行路由獨立守衛。

組件內的守衛

能夠在組件內部使用路由導航守衛, (個人理解相似於路由的生命週期)。

• beforeRouteEnter        　             路由組件被渲染以前以前調用, 注: 此時不能獲取到組件實例的this 
• beforeRouteUpdate(2.2新增)                        路由被修改是調　　              
• beforeRouteLeave                      導航離開該組件的對應路由時調用

 

1. 守衛 beforeRouteEnter

export default {
    data(){
        return {
            txt:'白夜行將'
        }
    },

    beforeRouteEnter (to, from, next) {
        console.log(this); 
        console.log(this.txt); 
        //須要執行 執行next()函數, 不然不會渲染
        next();
    }
}

上面的代碼執行的結果以下:

能夠得出 : 

　　beforeRouteEnter 守衛不能訪問 this，由於此時新組件還未被建立;

若是須要對組件實例進行操做, 能夠在導航被確認的時候執行回調，而且把組件實例做爲回調方法的參數。即: 用next()的回調函數進行操做實例 

beforeRouteEnter (to, from, next) {
        next(
            scope =>{
                console.log(scope.txt);
                scope.txt = "暗夜來遲"
                console.log(scope.txt);
            }
        )
    }

注意:  只有beforeRouteEnter 支持給 next 傳遞迴調的惟一守衛; beforeRouteUpdate 和 beforeRouteLeave 此時組件以及完成建立, this 已經可使用。

 

 2. 守衛 beforeRouteUpdate

 在當前路由改變，可是該組件被複用時調用

 舉例來講，對於一個帶有動態參數的路徑 /test/:id，在 /test/1 和 /test/2 之間跳轉的時候,

 在 路由hash模式時, 渲染一樣的 test 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用

 能夠訪問組件實例 this

    beforeRouteUpdate (to, from, next){
        console.log(this.txt);
        next();
    },

在變化id時, 會調用 beforeRouteUpdate 鉤子

注意: 使用該守衛時, 路由的模式只能是hash, 使用history模式, 該守衛不生效,  

 

3. 守衛 beforeRouteLeave

離開該組件的對應路由時調用,此時還能夠訪問組件 this;

用戶操做未完成是,不容許退出時,能夠是next(false); 阻止導航切換 

    beforeRouteLeave (to, from , next) {
        next(false)
    },

 

完整的導航解析流程

在router 的index 文件中設置 beforeEach beforeResolve  afterEach 和 路由獨享守衛 四種守衛;

const router = new Router({
  // mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/test',
      name: 'test',
      component: () =>  import("@/view/test"),
      beforeEnter: (to, from, next) => {
        console.log('獨享的守衛 beforeEach');
        next();
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log("全局守衛 beforeEach");
  next();
})

router.beforeResolve((to, from, next) => {
  console.log('全局 beforeResolve');
  next()
})

router.afterEach((to, from) => {
  console.log('全局 afterEach');
})

index

在路由home文件配置 beforeRouteLeave 路由

    beforeRouteLeave (to, from , next) {
        console.log('路由home的守衛 beforeRouteLeave');
        next()
    },
    deactivated(){
        console.log('home離開');
    },

home

在路由test文件配置 beforeRouteEnter路由

    beforeRouteEnter (to, from, next) {
        console.log('路由test的 beforeRouteEnter 守衛');
        next(scope => {
            console.log('beforeRouteEnter 守衛 回調函數');
        })
    },

    beforeRouteLeave (to, from , next) {
        console.log('路由test的 beforeRouteLeave 守衛');
        next(false)
    },

    activated(){
        console.log('test,完成加載');
    }

test

 控制檯打印結果 (keepa-alive 組件切換)

在點擊路由跳轉按鈕後,執行順序

1. 導航被觸發。
2. 在失活的組件裏調用 beforeRouteLeave 守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置裏調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件裏調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鉤子。
11. 執行 路由home 的 keep-alive  的 deactivated 鉤子
12. 觸發 DOM 更新 ,執行路由test 的 keep-alive  的 activated 的鉤子
13. 用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

 

以上我的學習理解,若有錯誤請指正