路由守卫的执行顺序

同一个类型的路由守卫是可以增加多个的

router.beforeEach((to, from) => {
  console.log('路由守卫1')
  return true
})

router.beforeEach((to, from) => {
  console.log('路由守卫2')
  return true
})

执行顺序是插入顺序, 上面的执行结果是: 路由守卫1, 路由守卫2

只有当前路由守卫函数返回true, 才会进入下一个守卫路由函数, 否则无论怎样进行路由跳转都还是会进入到当前路由守卫

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from) => {
  console.log('路由守卫1', to.name)
  if (to.name === 'dyn') {
    return {
      name: 'custom'
    }
  } else if (to.name === 'custom') {
    return {
      name: 'basic'
    }
  } else {
    return true
  }
})

router.beforeEach((to, from) => {
  console.log('路由守卫2')
  return true
})

export default router

假设: 现在有5个命名路由: dyn, custom, basic, other, test

现在进入 dyn 路由, 那么运行结果是:

路由守卫1 dyn
路由守卫1 custom
路由守卫1 basic
路由守卫2