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

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

相关推荐
弗锐土豆16 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku19 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined220 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo24 分钟前
搭建第一个Shopify App
前端·程序员
wangpq28 分钟前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
然我29 分钟前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee29 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C29 分钟前
常见web攻击类型
前端·http
jackyChan29 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript