Vue Router 路由管理怎么使用 router.beforeEnter 配置独享守卫-Vue.js-PHP中文网

router.beforeenter 是 vue router 的路由独享守卫，仅对特定路由生效，用于细粒度访问控制，如登录校验、权限判断、参数验证等，写在路由配置中，不污染全局逻辑，执行时机在全局前置守卫之后、组件创建之前。

vue router 路由管理怎么使用 router.beforeenter 配置独享守卫

router.beforeEnter 是 Vue Router 提供的路由独享守卫，它只对某一个特定路由生效，适合做细粒度的访问控制，比如管理员页面、私密数据页、订单校验等场景。它写在路由配置对象里，不污染全局逻辑，也比组件内守卫更早执行（在全局前置守卫之后、组件创建之前）。

beforeEnter 守卫怎么写？

直接在对应路由的配置项中添加 beforeEnter 字段，接收 (to, from, next) 三个参数（Vue Router 3.x），或返回值控制导航（Vue Router 4.x+ 推荐写法）：

const routes = [
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    beforeEnter: (to, from, next) => {
      const token = localStorage.getItem('token')
      if (token) {
        next()
      } else {
        next('/login?redirect=' + encodeURIComponent(to.fullPath))
      }
    }
  }
]

✅ 注意：beforeEnter 只作用于该路由，不会影响其他路径；它无法访问组件实例（this），也不参与组件生命周期。

常见使用场景与写法要点

登录态校验
检查 token 或 session 是否存在，缺失则跳转登录页，并携带原目标路径用于登录后回跳。

角色权限判断
读取用户角色（如 localStorage.getItem('role') 或 Vuex/Pinia 状态），仅允许指定角色进入：

beforeEnter: (to, from, next) => {
  const role = getUserRole() // 自定义获取方法
  if (role === 'admin') next()
  else next({ name: 'Forbidden' })
}

动态路由参数校验
比如 /order/:id 页面需先验证 ID 是否真实存在：

beforeEnter: async (to, from, next) => {
  try {
    const res = await api.checkOrder(to.params.id)
    if (res.exists) next()
    else next({ name: 'NotFound' })
  } catch {
    next({ name: 'Error' })
  }
}

Vue Router 4.x 写法升级（推荐）
next() 已废弃，改用 显式返回值 控制导航：

灵活路由的PHP库
灵活路由的PHP库

下载
```
beforeEnter: async (to, from) => {
  if (!await checkAuth()) return { name: 'Login', query: { redirect: to.fullPath } }
}
```
返回值含义：
- undefined 或 true → 允许导航
- false → 取消导航，停留在当前页
- 路由位置对象（如 { name: 'Login' }）→ 重定向