vue-router控制切換流水線

任何一個鉤子函數均可以終止界面切換；-------界面切換：組件更換；數據更新；
每一個切換鉤子函數都會接受一個 transition 對象做爲參數

---

切換對象（transition）：

**對象屬性**：
    //表示要切換的路徑（目標路徑）的路由對象；
    transition.to
    //表示當前路徑的路由對象；
    transition.from
    
**對象方法**：              
    //調用此函數處理切換過程的下一步；（是由於任何一個鉤子函數均可以終止界面切換麼？？）
    transition.next()
    //調用此函數來終止或者拒絕這次切換
    transition.abort([reason])
    //取消當前切換並重定向到另外一個路由
    transition.redirect(path)

全局的前置鉤子函數：

router.beforeEach(function(transition){
    
})

//在路由切換開始時調用；
//調用發生在整個切換流水線以前；
//若是此鉤子函數拒絕了切換，整個切換流水線根本就不會啓動；
//能夠註冊多個全局的前置鉤子函數，同步順序被調用；

全局的後置鉤子函數：

router.afterEach(function(transition){
    //只能訪問transition.on和transition.from屬性
})

//在每次路由驗證成功進入激活階段時被調用；
//調用時僅僅意味着切換已經被驗證過了（canDeactivate和canActivate都成功的被判定resolved），並且瀏覽器地址欄的地址已經更新；
//不能保證全部的active鉤子函數都被判定了；
//能夠註冊多個全局的後置鉤子函數，同步順序被調用；

//切換流水線：

1.檢查當前的視圖結構中是否存在可重用的組件：
    
    經過對比兩個新的組件樹，找出共用的組件，而後檢查它們的可重用性；
    
    組件A.canReuse?
    
2.驗證階段：

    檢查當前的組件是否可以被停用以及新組件是否能夠被激活：
    
    組件B.canDeactivate?  -------按照從下至上的冒泡順序檢查，先判斷子組件是否能夠被停用；
    組件C.canActivate?  ---------按照從上至下的傳播順序檢查，先判斷父組件是否能夠被激活；
    
    若是在驗證階段終止了界面切換，路由器會保持當前的應用狀態，恢復到前一個路徑；
    
3.激活階段：
    
    上一階段驗證成功完成（都被調用且沒有被終止），路由器則開始禁用當前組件並啓用新組件；
    禁用當前組件的順序從下至上；
    啓用新組件的順序從上至下；
    
    組件B.deactivate
    組件C.activate --> C.data
    
    界面的更新（數據的更新）會等到全部受影響的組件deactivate 和 activate鉤子函數執行以後才進行；
    
4.鉤子函數的使用：

    在構建組件的 route 選項中實現這些函數：

        Vue.component('hook-example', {
          // ... other options
          route: {
            activate: function (transition) {
                //接受transition對象做爲參數；
                transition.to;
                transition.from;
                transition.next();
                transition.abort([reason]);
                transition.redirect(path);
            },
            deactivate: function (transition) {
              console.log('hook-example deactivated!')
              transition.next()
            }
          }
        })