什么是路由独享守卫：在 index.js 中针对特定路径进行权限校验的实战

路由独享守卫是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 实例上