大家好,我是小杨,一个写了6年前端的老司机。今天咱们聊聊Vue路由里的钩子函数,这些钩子就像是路由的"关卡守卫",能在页面跳转前后做各种骚操作,比如权限拦截、数据预加载、页面过渡动画等等。
1. 路由钩子是什么?能干啥?
简单来说,路由钩子就是Vue Router在路由切换时提供的回调函数,可以在不同阶段拦截或处理路由跳转。比如:
- 登录拦截:没登录?滚回登录页!
- 数据预加载:进页面之前先把数据请求好
- 页面权限控制:你没权限?抱歉,此路不通
- 滚动行为控制:跳转后自动回到顶部
2. 路由钩子分类
Vue Router的钩子主要分三类:
- 全局钩子(整个路由生效)
- 路由独享钩子(只对某个路由生效)
- 组件内钩子(在组件内部使用)
(1)全局钩子:整个路由的守门人
① beforeEach(路由跳转前)
javascript
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !我.isLoggedIn) {
next('/login') // 没登录?去登录页!
} else {
next() // 放行
}
})
适用场景:全局权限控制、登录拦截
② afterEach(路由跳转后)
javascript
router.afterEach((to, from) => {
sendAnalytics(to.path) // 统计页面访问
})
适用场景:埋点统计、页面访问日志
(2)路由独享钩子:单个路由的专属逻辑
javascript
const routes = [
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
if (!我.hasPermission('admin')) {
next('/403') // 没权限?去403页面!
} else {
next()
}
}
}
]
适用场景:特定路由的权限控制
(3)组件内钩子:组件自己的路由逻辑
在组件里可以直接用这些钩子:
- beforeRouteEnter(进入组件前)
- beforeRouteUpdate(路由参数变化但组件复用时)
- beforeRouteLeave(离开组件前)
① beforeRouteEnter(进入组件前)
javascript
export default {
beforeRouteEnter(to, from, next) {
// 这里还不能用 `this`,因为组件还没创建!
next(vm => {
console.log(vm.myData) // 现在可以访问组件实例了
})
}
}
适用场景:进入页面前的数据预加载
② beforeRouteUpdate(路由参数变化时)
javascript
export default {
beforeRouteUpdate(to, from, next) {
if (to.params.id !== from.params.id) {
this.fetchData(to.params.id) // 重新获取数据
}
next()
}
}
适用场景:动态路由参数变化时刷新数据
③ beforeRouteLeave(离开页面时)
javascript
export default {
beforeRouteLeave(to, from, next) {
if (this.unsavedChanges) {
if (confirm('有未保存的内容,确定离开吗?')) {
next()
} else {
next(false) // 取消导航
}
} else {
next()
}
}
}
适用场景:防止用户误操作离开页面(比如填了一半的表单)
3. 实际开发中的经典场景
场景1:登录拦截
javascript
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login?redirect=' + to.fullPath) // 记录跳转目标,登录后自动回来
} else {
next()
}
})
场景2:动态修改页面标题
javascript
router.afterEach((to) => {
document.title = to.meta.title || '默认标题'
})
场景3:滚动行为控制
javascript
const router = new VueRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition // 返回之前的位置(比如浏览器后退时)
} else {
return { x: 0, y: 0 } // 默认滚动到顶部
}
}
})
4. 总结
- 全局钩子 :
beforeEach
、afterEach
(适合全局逻辑) - 路由独享钩子 :
beforeEnter
(适合单个路由的逻辑) - 组件内钩子 :
beforeRouteEnter
、beforeRouteUpdate
、beforeRouteLeave
(适合组件内部逻辑)
合理使用这些钩子,能让你的路由跳转更智能、更安全!
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群:906392632
最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!