路由独享守卫是Vue Router中为特定路由配置的前置守卫，仅在访问该路由时触发，支持独立权限控制、逻辑内聚、维护清晰；需在routes数组某对象中定义beforeEnter函数，参数为(to, from, next)，须手动处理异步且next只能调用一次。
路由独享守卫是 Vue Router 中专为某个具体路由配置的前置守卫，只在访问该路由时触发，不干扰其他路由。它比全局守卫更精准，适合对敏感页面（如后台管理页、用户中心）做独立权限控制，且逻辑只写在对应路由配置里，维护清晰、耦合低。
它长什么样？怎么配？
在 router/index.js（或你的路由配置文件）中，直接在某条 routes 数组里的对象 上添加 beforeEnter 函数：
- 参数固定为
(to, from, next)，其中to是目标路由，from是来源路由，next是必须调用的放行函数 - 不能写在
router.beforeEach里，必须属于某一条{ path: '/admin', name: 'Admin', component: ..., beforeEnter: ... } - 不支持
async/await直接返回，需手动处理异步（比如用next(false)或重定向）
实战：给 /admin 路径加登录态校验
假设你用 localStorage 存 token，只有带有效 token 才能进后台页：
{
path: '/admin',
name: 'Admin',
component: () => import('@/views/Admin.vue'),
beforeEnter: (to, from, next) => {
const token = localStorage.getItem('token')
if (!token) {
next({ name: 'Login', query: { redirect: to.fullPath } })
return
}
// 可选：检查 token 是否过期（比如解析 JWT payload）
try {
const payload = JSON.parse(atob(token.split('.')[1]))
if (Date.now() >= payload.exp * 1000) {
localStorage.removeItem('token')
next({ name: 'Login', query: { redirect: to.fullPath } })
return
}
} catch (e) {
next({ name: 'Login', query: { redirect: to.fullPath } })
return
}
next()
}
}
- 未登录时跳转登录页，并把当前路径记在
redirect参数里，登录成功后可自动跳回 - token 解析失败或已过期，同样清空并跳转，避免无效凭证绕过
- 所有逻辑仅影响
/admin这一个路由，不影响首页、文章页等其他路径
和全局守卫比，它有什么优势？
当你只需要限制个别页面，而不是全站统一拦截时，路由独享守卫更合适：
- 避免在全局守卫里堆一堆
if (to.name === 'xxx')判断，让代码更聚焦 - 不同页面可有不同校验逻辑——比如 /admin 要管理员权限，/user/profile 只需普通登录即可
- 路由配置和守卫写在一起，新人看代码时一眼就能明白“这个页面要什么条件才能进”
- 执行时机在全局守卫之后、组件守卫之前，顺序可控，不会被其他守卫意外覆盖
注意几个易错点
实际写的时候容易踩坑，这几个细节建议标在注释里：
-
next()必须且只能调用一次，漏调会卡住导航，重复调用会报错 - 不要在
beforeEnter里直接修改router.push，要用next({ path: ... })替代 - 如果需要异步验证（如调 API 校验权限），得用
next(false)暂停，等响应回来再手动next()或next('/login') - Vite + Vue3 项目中，确保路由配置导出的是
createRouter(...)实例，且beforeEnter写在 routes 数组内，不是 router 实例上
