vue手札 -- vue-router的簡單流程

由於路由權限問題，簡單的看了一下vue-router。整理了一下router的一個簡單過程

beforeEach -> canReuse -> canDeactivate -> canActivate -> deactivate -> afterEach -> activate

其中canDeactivate | canActivate | deactivate | activate這幾個鉤子涉及組件複用的問題，因此有可能不會被調用，可是當canReuse返回false時，就必定會被調用了

1、vue-router組成

vue-router組件有三個部分

1.link：即v-link
2.view：元素指令，即<router-view></router-view>
3.router：核心部分

2、vue-router簡單的一個流程

1.url 變化

2.history監聽（onChange事件）
      # 例如：
         window.addEventListener(‘hashchange’, () => {})

3.調用路由匹配（ this._match）
      # 會保存老的transition和新的transition

4.走一遍beforeEach

5.走startTransition開始進入transition的撕逼週期（也算是vue-router的核心所在）
 
      # 這裏會涉及組件複用的問題
         1).canReuse：調用canReuse鉤子
              看當前的<vue-router>和將要跳轉的<vue-router>之間有沒有可重用的組件
              a/b/c
              a/b/d  =>  可複用[a,b]，須要銷燬[c]，須要生成[d]
              
         2).canDeactivate(c)：調用canDeactivate鉤子
             route: {
                 canDeactivate() {}
             }
             
         3).canActivate(d)：調用canActivate鉤子
         
         4).deactivate(c)：調用deactivate鉤子
         
         5)._afterEachHooks(c)：調用afterEach鉤子
         
         6).reuse([a,b])：調用data鉤子
         
         7).activate(d) ：調用activate | data鉤子

6.若activate(d)，則調用vue中的build方法，新生成component

3、兩個應用場景

1.組件複用(a/b/:id)

此次遇到了相似(a/b/:id)這樣的路由，這種路由一直都只是（:id）在變化，<vue-router>一直是被複用的，因此不會走canDeactive | canActivate | deactivate | activate，只會走_beforeEachHooks，_afterEachHooks、canReuse和reuse，也就是調用router.beforeEach，canReuse，router.afterEach和this.data。因此data、canReuse、beforeEach和afterEach是vue-router老是會走的四個方法固然沒有被transition.abort()的前提下

new VueRouter().beforeEach(function (transition) {
     if (transition.to.path === '/forbidden') {
        transition.abort()
      } else {
        transition.next()
      }
 })

new VueRouter().afterEach(function (transition) {
   console.log('成功瀏覽到: ' + transition.to.path)
 })

route: {
     canReuse() {
       return true
     },
     data() {
         // TODO 沒有被transition.abort()的時候，會被調用
     }
 }

2.路由切換

有一種場景是組件a切換到組件b時，想要先停留在a，等b獲取了數據才進行切換，想作到這個能夠使用waitForData（這個好像在文檔中是沒提到的，在activate方法中用到了），在b組件做以下操做：

route: {
     data() {
         // TODO 數據請求加載
     },
     waitForData: true  //數據加載完在切換
 }