大家好，我是小杨，一个干了快6年的前端老油条。今天咱们来聊一个Vue Router里超级实用的功能——路由守卫。
你有没有遇到过这种场景：
- 用户没登录，却偷偷访问后台页面？
- 页面跳转前，需要先弹个确认框？
- 切换路由时，要动态修改页面标题？
这些“边界问题”，全靠路由守卫来搞定！它就像路由的“保安”，决定谁可以进、谁不能进，甚至还能在进门时搞点小动作。
一、路由守卫是啥？
简单说，它就是路由跳转过程中的钩子函数，可以在跳转前、跳转后、甚至跳转失败时触发逻辑。
举个栗子：
// 比如检查用户是否登录
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !我.user.isLogin) {
next('/login') // 赶去登录页
} else {
next() // 放行
}
})
二、全局守卫 vs 局部守卫
1. 全局守卫：整个路由的“大门保安”
特点：对所有路由生效，适合做统一拦截（比如登录验证）。
// 全局前置守卫（每次路由跳转前触发）
router.beforeEach((to, from, next) => {
console.log('全局保安：所有路由都要过我这一关！')
next()
})
// 全局后置守卫（跳转完成后触发）
router.afterEach(() => {
console.log('全局保洁：路由跳完了我来扫个尾~')
})
适用场景：
- 全站登录状态校验
- 页面访问权限控制
- 路由跳转日志记录
2. 局部守卫：单个路由的“VIP保镖”
特点：只对某个路由生效，精细控制。
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：离开组件前调用（适合做“未保存提示”）
export default {
beforeRouteLeave(to, from, next) {
if (我.hasUnsavedChanges) {
if (confirm('你有未保存的修改，确定离开吗？')) {
next()
} else {
next(false) // 取消导航
}
} else {
next()
}
}
}
四、实战技巧
- 登录拦截经典写法
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() // 不需要鉴权的路由直接放行
}
})
- 后置守卫修改页面标题
router.afterEach((to) => {
document.title = to.meta.title || '默认标题'
})
五、总结
| 守卫类型 | 作用范围 | 典型应用场景 |
|---|---|---|
| 全局守卫 | 所有路由 | 登录校验、权限控制 |
| 路由独享守卫 | 单个路由 | 特殊页面权限（如管理员） |
| 组件内守卫 | 单个组件 | 未保存提示、动态数据获取 |
口诀：
- 全站规则用全局，
- 特殊路由单独管，
- 组件内部防手滑。
路由守卫用好了，能让你少写一堆重复逻辑。下次遇到权限问题，记得派你的“保安”上岗！
如果有问题，欢迎在评论区和我唠嗑~ 😄
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群：906392632
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
