Vue路由钩子全攻略:让你的页面跳转更丝滑!

大家好,我是小杨,一个写了6年前端的老司机。今天咱们聊聊Vue路由里的钩子函数,这些钩子就像是路由的"关卡守卫",能在页面跳转前后做各种骚操作,比如权限拦截、数据预加载、页面过渡动画等等。

1. 路由钩子是什么?能干啥?

简单来说,路由钩子就是Vue Router在路由切换时提供的回调函数,可以在不同阶段拦截或处理路由跳转。比如:

  • 登录拦截:没登录?滚回登录页!
  • 数据预加载:进页面之前先把数据请求好
  • 页面权限控制:你没权限?抱歉,此路不通
  • 滚动行为控制:跳转后自动回到顶部

2. 路由钩子分类

Vue Router的钩子主要分三类:

  1. 全局钩子(整个路由生效)
  2. 路由独享钩子(只对某个路由生效)
  3. 组件内钩子(在组件内部使用)

(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. 总结

  • 全局钩子beforeEachafterEach(适合全局逻辑)
  • 路由独享钩子beforeEnter(适合单个路由的逻辑)
  • 组件内钩子beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave(适合组件内部逻辑)

合理使用这些钩子,能让你的路由跳转更智能、更安全!

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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

相关推荐
G等你下课25 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在26 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵29 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius29 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91032 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala34 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy34 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101037 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日38 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子39 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试