官方文檔地址：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 和 路由獨享守衛 四種守衛;

在路由home文件配置 beforeRouteLeave 路由

    beforeRouteLeave (to, from , next) {
        console.log(‘路由home的守衛 beforeRouteLeave‘);
        next()
    },
    deactivated(){
        console.log(‘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,完成加載‘);
    }

控制臺打印結果 (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 的回調函數。

以上個人學習理解,如有錯誤請指正

Vue2.0 Router 導航守衛