Vue 3.x vue-router 导航守卫

Question

全局守卫与钩子

// 全局前置守卫 
// 当一个导航触发时，全局前置守卫按照创建顺序调用。
// 异步解析执行
// 导航在所有全局前置守卫 resolve 完之前一直处于等待中
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next()
})
// 全局解析守卫 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后
router.beforeResolve((to, from, next) => {
  console.log('beforeResolve')
  next()
})
// 全局后置钩子 不会接受 next 函数也不会改变导航本
router.afterEach((to, from) => {
  console.log('afterEach')
})

路由独享的守卫

{
  path: '/home',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
  beforeEnter: (to, from, next) => {
    // 和 beforeEach 完全相同，如果都设置则在 beforeEach 之后紧随执行
    console.log('beforeEnter')
    next()
  },
},

组件内的守卫

// 在渲染该组件的对应路由 被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建，但是可以通过 next 回调去获取
beforeRouteEnter (to, from, next) {
  console.log('beforeRouteEnter')
  next(vm => {
    console.log('beforeRouteEnter next 回调 在 created 和 mounted 之间被调用')
  })
},
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
beforeRouteUpdate (to, from, next) {
  console.log('beforeRouteUpdate')
  next()
},
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
beforeRouteLeave (to, from, next) {
  console.log('beforeRouteLeave')
  next()
},

组件内的守卫只能在 component 对应的那个组件里面生效， 至于 component 里面又引用其他组件，其他组件的组件内的守卫不生效

所以对于 lazyLoadView 模式，只能写在下面

return Promise.resolve({
  functional: true,
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next(vm => {
      console.log('lazyLoadView beforeRouteEnter next 回调 在 created 和 mounted 之间被调用')
    })
  },
  render (h, { data, children }) {
    return h(AsyncHandler, data, children)
  },
})

触发顺序

beforeRouterLeave --> beforeEach --> beforeEnter --> beforeRouteEnter --> beforeResolve --> afterEach --> created --> beforeRouteEnter 的 next 回调 --> mounted