路由守卫:你的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()
    }
  }
}

四、实战技巧

  1. 登录拦截经典写法
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() // 不需要鉴权的路由直接放行
  }
})
  1. 后置守卫修改页面标题
javascript 复制代码
router.afterEach((to) => {
  document.title = to.meta.title || '默认标题'
})

五、总结

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

口诀

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

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

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

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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

相关推荐
爷_3 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee445 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro5 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin6 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说6 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2437 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋37 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA7 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你7 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat