路由鉤子函式的錯誤捕獲

如果我們在全域性守衛/路由獨享守衛/元件路由守衛的鉤子函式中有錯誤，可以這樣捕獲：

    router.onError(callback => { 
    // 2.4.0新增 並不常用，瞭解一下就可以了 
      console.log(callback, 'callback');
    });

在路由文件中還有更多的例項方法：動態新增路由等，有興趣可以瞭解一下。

跳轉死迴圈，頁面永遠空白

我瞭解到的，很多人會碰到這個問題，來看一下這段虛擬碼：

    router.beforeEach((to, from, next) => {
      if(登入){
         next()
      }else{
          next({ name: 'login' }); 
      }
    });
 

看邏輯貌似是對的，但是當我們跳轉到login之後，因為此時還是未登入狀態，所以會一直跳轉到login然後死迴圈，頁面一直是空白的，所以：我們需要把判斷條件稍微改一下。

    router.beforeEach((to, from, next) => {
      if(登入){
         next()
      }else{
          next({ name: 'login' }); 
      }
    });

看邏輯貌似是對的，但是當我們跳轉到login之後，因為此時還是未登入狀態，所以會一直跳轉到login然後死迴圈，頁面一直是空白的，所以：我們需要把判斷條件稍微改一下。

    if(登入 || to.name === 'login'){ next() } // 登入，或者將要前往login頁面的時候，就允許進入路由

全域性後置鉤子的跳轉：

文件中提到因為router.afterEach不接受next函式所以也不會改變導航本身，意思就是隻能當成一個鉤子來使用，但是我自己在試的時候發現，我們可以通過這種形式來實現跳轉：

    // main.js 入口檔案
    import router from './router'; // 引入路由
    router.afterEach((to, from) => {
      if (未登入 && to.name !== 'login') {
        router.push({ name: 'login' }); // 跳轉login
      }
    });
 

完整的路由導航解析流程(不包括其他生命週期)：

1. 觸發進入其他路由。
2. 呼叫要離開路由的元件守衛beforeRouteLeave
3. 呼叫局前置守衛：beforeEach
4. 在重用的元件裡呼叫 beforeRouteUpdate
5. 呼叫路由獨享守衛 beforeEnter。
6. 解析非同步路由元件。
7. 在將要進入的路由元件中呼叫beforeRouteEnter
8. 呼叫全域性解析守衛 beforeResolve
9. 導航被確認。
10. 呼叫全域性後置鉤子的 afterEach 鉤子。
11. 觸發DOM更新(mounted)。
12. 執行beforeRouteEnter 守衛中傳給 next 的回撥函式