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',

這種情況下不觸發 , 因為不涉及進入