vue手札 -- vue-router的简朴流程

2024年5月2日 254次阅读 来源: foolishq

由于路由权限题目，简朴的看了一下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  //数据加载完在切换
 }
    原文作者：foolishq
    原文地址: https://segmentfault.com/a/1190000007010802
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞