脚本宝典收集整理的这篇文章主要介绍了vue手札 -- vue-router的简单流程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

因为路由权限问题，简单的看了一下vue-router。整理了一下router的一个简单过程

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

其中canDeactivate | canActivate | deactivate | activate这几个钩子涉及组件复用的问题，所以有可能不会被调用，但是当canReuse返回false时，就一定会被调用了

一、vue-router组成

vue-router组件有三个部分

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

二、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

三、两个应用场景

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue手札 -- vue-router的简单流程全部内容，希望文章能够帮你解决vue手札 -- vue-router的简单流程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。