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

大家好，我是小杨，一个写了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

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