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  //数据加载完在切换
 }