路由独享守卫通过在路由配置对象中添加beforeenter函数实现，用于为特定路由设置访问控制逻辑，支持权限校验、异步验证及meta动态校验，且必须且仅能调用一次next()。
路由独享守卫是专为某一条路由设置的访问控制逻辑，不干扰其他页面，适合处理管理员页、敏感操作页等需要单独策略的场景。它写在路由配置对象内部，比全局守卫更聚焦、更易维护。
怎么在路由配置里添加 beforeEnter
直接在对应 route 对象中加 beforeEnter 函数即可。这个函数会在进入该路由前执行，参数和全局守卫一致：to、from、next。
- 把权限判断逻辑写在里面，比如检查 localStorage 中的角色或 token
- 校验通过就调用 next()，否则调用 next('/403') 或 next('/login')
- 支持 async/await，可等待接口返回再决定是否放行
基于角色控制单个路由访问
比如只有 admin 才能进 /admin 页面，普通用户访问就跳首页：
{
path: '/admin',
component: AdminView,
beforeEnter: (to, from, next) => {
const role = localStorage.getItem('userRole')
if (role === 'admin') next()
else next('/')
}
}
这种写法避免了在全局守卫里堆砌大量 if-else，每个路由的权限规则一目了然。
配合路由元信息做动态校验
可以结合 meta 字段传递权限标识，让守卫逻辑更通用：
{
path: '/users/edit/:id',
component: UserEdit,
meta: { permission: 'update_user' },
beforeEnter: async (to, from, next) => {
const hasPerm = await checkPermission(to.meta.permission)
if (hasPerm) next()
else next('/403')
}
}
这样不同页面只需改 meta.permission 值，守卫函数本身可复用。
注意 next 的调用时机和方式
beforeEnter 中必须且只能调用一次 next，否则导航会卡住或报错：
- 不调用 next → 路由跳转挂起
- 多次调用 next → 控制台警告，行为不可预测
- 传入字符串（如 '/login'）或路由对象（如 { name: 'login' }）实现重定向
- 传入 false 取消当前导航
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
