博客站

在 Vue.js 中，Vue Router 提供了一系列钩子函数（也称为导航守卫），允许你在路由跳转的不同阶段执行特定的逻辑。这些钩子函数可以帮助你进行权限验证、数据预取、页面跳转控制等操作。以下是一些常见的 Vue Router 钩子函数及其作用：

全局钩子函数

1. beforeEach

   • 作用：在路由切换开始时调用，每次导航都会触发。
   • 参数：to（目标路由对象），from（当前导航起始路由对象），next（一个函数，必须被调用以继续导航）。
   • 用途：常用于权限验证、页面跳转前的一些全局处理逻辑。

   router.beforeEach((to, from, next) => {
     // ...逻辑处理
     next(); // 确保调用 next() 方法
   });
   

2. beforeResolve

   • 作用：在路由解析之前调用，但在异步组件和路由懒加载之前。
   • 参数：to，from，next。
   • 用途：较少使用，但在某些需要早于懒加载组件解析时执行逻辑的场景下有用。

3. afterEach

   • 作用：在路由切换完成后调用，不会接受 next 函数，也不会改变导航本身。
   • 参数：to，from。
   • 用途：常用于页面跳转后的分析统计、页面标题修改等。

   router.afterEach((to, from) => {
     // ...逻辑处理
   });
   

路由独享钩子函数

1. beforeEnter

   • 作用：在路由配置对象中直接定义，在进入某个路由前调用。
   • 参数：to，from，next。
   • 用途：适用于特定路由的权限验证、数据预取等。

   const router = new VueRouter({
     routes: [
       {
         path: '/example',
         component: ExampleComponent,
         beforeEnter: (to, from, next) => {
           // ...逻辑处理
           next();
         }
       }
     ]
   });
   

组件内钩子函数

1. beforeRouteEnter

   • 作用：在路由进入组件之前调用，此时组件实例还未创建。
   • 参数：to，from，next，以及 vm（仅在 next 中作为回调的第三个参数提供）。
   • 用途：常用于数据预取、页面初始化等。

   beforeRouteEnter (to, from, next) {
     next(vm => {
       // 访问组件实例 `vm`
     });
   }
   

2. beforeRouteUpdate

   • 作用：在路由参数变化时，组件重新渲染之前调用。
   • 参数：to，from，next。
   • 用途：适用于对路由参数变化作出响应的场景。

   beforeRouteUpdate (to, from, next) {
     // ...逻辑处理
     next();
   }
   

3. beforeRouteLeave

   • 作用：在导航离开当前路由组件时调用。
   • 参数：to，from，next。
   • 用途：常用于用户离开页面前的确认提示、数据保存等。

   beforeRouteLeave (to, from, next) {
     const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
     if (answer) {
       next()
     } else {
       next(false)
     }
   }
   

通过这些钩子函数，你可以灵活地控制路由跳转过程中的各种逻辑，从而实现更复杂的页面导航和数据处理功能。