1.全域性導航鉤子

1.1 前置守衛 -- beforeEach

router.beforeEach((to, from, next) => {
      if(判斷條件){
        // 下一步進行的操作
      } else {
        // 下一步進行的操作
      }
    })

next方法必須要呼叫，否則鉤子函式無法resolved。

1.2 後置守衛 --afterEach

router.afterEach((to, from, next) => {
      if(判斷條件){
        // 下一步進行的操作
      } else {
        // 下一步進行的操作
      }
    })
 

2.單獨路由獨享鉤子

2.1 beforeEnter

{
    path: '/404',
    component: () => import('@/views/404'),
    beforeEnter(to,from,next){
      if(判斷條件){
        // 下一步進行的操作
      } else {
        // 下一步進行的操作
      }
    }
  },

3.元件內鉤子

3.1 befpreROUTEenter

beforeRouteEnter(to, from, next) {},

3.2 boforeRouteUpdate

beforeRouteUpdate(to, from, next) {},

3.3 beforeRouteLeave

beforeRouteLeave(to, from, next) {},

4.全域性解析守衛

4.1beforeResolve

router.beforeResolve((to, from, next) => {
      if(判斷條件){
        // 下一步進行的操作
      } else {
        // 下一步進行的操作
      }
    })

5.鉤子的呼叫順序

參考連結：https://blog.csdn.net/weixin_43900414/article/details/95441512