路由守卫：你的Vue路由‘保安’，全局把关还是局部盯梢？

大家好，我是小杨，一个干了快6年的前端老油条。今天咱们来聊一个Vue Router里超级实用的功能------路由守卫。

你有没有遇到过这种场景：

用户没登录，却偷偷访问后台页面？
页面跳转前，需要先弹个确认框？
切换路由时，要动态修改页面标题？

这些"边界问题"，全靠路由守卫来搞定！它就像路由的"保安"，决定谁可以进、谁不能进，甚至还能在进门时搞点小动作。

一、路由守卫是啥？

简单说，它就是路由跳转过程中的钩子函数，可以在跳转前、跳转后、甚至跳转失败时触发逻辑。

举个栗子：

javascript 复制代码

// 比如检查用户是否登录
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !我.user.isLogin) {
    next('/login') // 赶去登录页
  } else {
    next() // 放行
  }
})

二、全局守卫 vs 局部守卫

1. 全局守卫：整个路由的"大门保安"

特点：对所有路由生效，适合做统一拦截（比如登录验证）。

javascript 复制代码

// 全局前置守卫（每次路由跳转前触发）
router.beforeEach((to, from, next) => {
  console.log('全局保安：所有路由都要过我这一关！')
  next()
})

// 全局后置守卫（跳转完成后触发）
router.afterEach(() => {
  console.log('全局保洁：路由跳完了我来扫个尾~')
})

适用场景：

全站登录状态校验
页面访问权限控制
路由跳转日志记录

2. 局部守卫：单个路由的"VIP保镖"

特点：只对某个路由生效，精细控制。

javascript 复制代码

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from, next) => {
      if (!我.user.isAdmin) {
        next('/403') // 非管理员跳转到403页面
      } else {
        next()
      }
    }
  }
]

适用场景：

特定页面权限（如管理员后台）
动态路由参数校验（比如ID是否合法）

三、组件内守卫：更细粒度的控制

在Vue组件里，还能用这三个钩子：

beforeRouteEnter：进组件前调用（此时组件实例未创建！）
beforeRouteUpdate：路由参数变化时调用（比如从 /user/1 跳到 /user/2）
beforeRouteLeave：离开组件前调用（适合做"未保存提示"）

javascript 复制代码

export default {
  beforeRouteLeave(to, from, next) {
    if (我.hasUnsavedChanges) {
      if (confirm('你有未保存的修改，确定离开吗？')) {
        next()
      } else {
        next(false) // 取消导航
      }
    } else {
      next()
    }
  }
}

四、实战技巧

登录拦截经典写法

javascript 复制代码

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!localStorage.getItem('token')) {
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else {
      next()
    }
  } else {
    next() // 不需要鉴权的路由直接放行
  }
})

后置守卫修改页面标题

javascript 复制代码

router.afterEach((to) => {
  document.title = to.meta.title || '默认标题'
})

五、总结

守卫类型	作用范围	典型应用场景
全局守卫	所有路由	登录校验、权限控制
路由独享守卫	单个路由	特殊页面权限（如管理员）
组件内守卫	单个组件	未保存提示、动态数据获取

口诀：

全站规则用全局，
特殊路由单独管，
组件内部防手滑。

路由守卫用好了，能让你少写一堆重复逻辑。下次遇到权限问题，记得派你的"保安"上岗！

如果有问题，欢迎在评论区和我唠嗑~ 😄

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！