vue 路由守卫的先后执行过程

路由守卫共计三种

1 全局守卫router.beforeEach 页面加载之前，router.afterEach页面加载之后 

　　也就是我们直接设置vueRouter

import router from '@/router'
router.beforeEach(async (to, from, next) => {
   //做一些事情
   next()  
})

 

2   路由自己的守卫 

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3  页面内的守卫

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

和vue 钩子函数属于同一级 beforeRouteEnter 这个特殊注意 , 因为它执行的时候是没有this的, 因为那会vue实例还没有被创建, 但是它又一个可以替代this的东西

beforeRouteEnter(to, from, next) {
    next (vm => {
        // vm相当于this
    })
}

 

---

那么vueRouter 它具体是哪个先后呢

1 显示触发跳转 , 有了现在在什么地方,要去到什么地方

2 然后触发现在所在router的离开事件

3 调用全局也就是1类守卫的beforeEach守卫

4 调用将要去的ruoter里的beforeRuteUpdate方法(原地跳转会触发)

5 然后进入2类路由守卫的beforeEnter中

6 这时候进行加载router对应的组件页面

7 加载完成后调用组件的beforeRouteEnter

8 然后调用全局的beforeResolve守卫

9 然后就是路由确认跳转 ,调用全局beforeResolve守卫 

10 调用全局的afterEach

11 触发更新DOM

12 调用组件内的beforeRouteEnter

 

总结执行顺序常用的

beforeRouteLeave -> 1类守卫的beforeEach守卫 -> 2类守卫 -> 组件beforeRouteEnter , 其它的可以选择使用, 这几个算比较有用的吧

特殊注意 2类路由守卫 

redirect: '/partindex',

这种情况下不触发 , 因为不涉及进入