Vue.js如何配置路由守卫？

在Vue.js项目中使用vue-router进行路由管理时，路由守卫是实现路由跳转拦截、权限控制的重要功能，下面我们详细说明不同场景下的配置方法。

路由守卫的分类

vue-router提供的路由守卫主要分为三类，不同守卫的作用范围和触发时机有所区别：

• 全局守卫：作用于所有路由跳转，包括全局前置守卫、全局解析守卫、全局后置钩子
• 路由独享守卫：定义在单个路由配置中，仅对该路由的跳转生效
• 组件内守卫：定义在路由组件内部，和组件生命周期关联，针对当前组件的路由跳转生效

全局守卫配置

全局守卫通常在路由实例创建后通过路由对象的方法注册，最常用的全局前置守卫可以用来做登录校验。

全局前置守卫

全局前置守卫会在每次路由跳转前触发，接收三个参数：

• to：即将进入的目标路由对象
• from：当前导航正要离开的路由对象
• next：控制跳转的函数，必须调用否则路由不会执行跳转

// 导入路由实例
import router from './router'

// 配置全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断目标路由是否需要登录
  const needLogin = to.meta && to.meta.needLogin
  // 获取本地存储的用户登录状态
  const token = localStorage.getItem('user_token')
  
  if (needLogin && !token) {
    // 需要登录但未登录，跳转到登录页，同时携带当前路由路径方便登录后返回
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    // 其他情况正常跳转
    next()
  }
})

全局后置钩子

全局后置钩子不会接收next函数，也不会改变导航本身，通常用来设置页面标题、统计路由跳转数据。

router.afterEach((to, from) => {
  // 设置页面标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = '默认页面标题'
  }
})

路由独享守卫配置

路由独享守卫直接在路由配置对象中添加beforeEnter字段，仅对当前路由生效。

// 路由配置示例
const routes = [
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('@/views/Admin.vue'),
    meta: { needLogin: true, role: 'admin' },
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      const userRole = localStorage.getItem('user_role')
      if (userRole === 'admin') {
        next()
      } else {
        next('/403') // 无权限跳转到403页面
      }
    }
  }
]

组件内守卫配置

组件内守卫定义在路由组件内部，有三个钩子函数可以使用：

• beforeRouteEnter：进入当前组件对应路由前触发，此时组件实例还未创建，无法访问this
• beforeRouteUpdate：当前路由复用该组件，参数发生变化时触发
• beforeRouteLeave：离开当前组件对应路由时触发

export default {
  name: 'UserDetail',
  // 进入路由前守卫
  beforeRouteEnter(to, from, next) {
    // 不能访问this，因为组件还未实例化
    const userId = to.params.id
    if (userId) {
      next(vm => {
        // 通过回调访问组件实例
        vm.initData(userId)
      })
    } else {
      next('/404')
    }
  },
  // 路由更新守卫
  beforeRouteUpdate(to, from, next) {
    // 路由参数变化时重新加载数据
    this.initData(to.params.id)
    next()
  },
  // 离开路由前守卫
  beforeRouteLeave(to, from, next) {
    // 如果有未保存的表单数据，提示用户
    if (this.isFormDirty) {
      const confirmLeave = window.confirm('当前页面有未保存的内容，确定要离开吗？')
      if (confirmLeave) {
        next()
      } else {
        next(false) // 取消跳转
      }
    } else {
      next()
    }
  },
  methods: {
    initData(userId) {
      // 获取用户详情数据
      console.log('加载用户ID为' + userId + '的数据')
    }
  }
}

守卫执行顺序说明

当一个路由跳转触发时，守卫的执行顺序如下：

1. 全局前置守卫 beforeEach
2. 路由独享守卫 beforeEnter（如果有）
3. 组件内 beforeRouteEnter（如果是进入新组件）
4. 全局解析守卫 beforeResolve
5. 全局后置钩子 afterEach

了解执行顺序可以帮助我们在合适的守卫中处理对应的业务逻辑，避免逻辑冲突。

Vue.js路由守卫vue_router导航守卫路由权限控制修改时间：2026-06-02 04:42:43