Vue Router 路由生命周期钩子/路由导航守卫

本文主要是介绍Vue Router 路由生命周期钩子/路由导航守卫，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简介

Vue Router 提供了路由钩子（Route Hooks），允许你在路由发生变化时执行一些操作。
这些钩子可以在路由进入、离开等关键时刻触发，从而实现一些特定的功能，比如页面权限控制、数据预加载等。

路由守卫简单来讲就是监听页面进入，修改，和离开的功能。

每个守卫接受三个参数：

• to：即将要进入的路由对象
• from：当前导航正要离开的路由
• next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

关于 next ：

1. next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
2. next(false)：中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
3. next('/') 或 next({ path: '/' })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
4. next(error)：(2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

.

Vue Router 的路由钩子主要分为三类：

• 全局钩子
• 路由独享的钩子
• 组件内的钩子

---

一、全局钩子

全局钩子对整个路由实例都有效，它们主要有两个：beforeEach 和 afterEach。

• beforeEach：在路由跳转前触发，常用于判断用户是否登录、是否有权限访问某个页面等。

• beforeResolve：在路由解析完成后被调用，即在确认要导航的路由与当前的路由不同之后，但在实际的组件渲染之前。这个守卫非常适合用于在导航到新的路由之前预先获取数据或执行其他逻辑，特别是当这些数据需要在组件渲染之前就已经准备好的时候。

• afterEach：在路由跳转后触发，通常用于一些清理工作或者页面跳转后的通知。

const router = new VueRouter({ /* ... */ }); router.beforeEach((to, from, next) => {  // 逻辑判断...  next() // 确保要调用 next() 方法，否则路由不会跳转  
})  router.beforeResolve((to, from, next) => {// 假设需要预先获取一些数据，比如用户的权限信息next(); // 确保调用 next() 来继续导航
});router.afterEach((to, from) => {  // 路由跳转后的操作...  
})

---

二、路由独享的钩子

可以在路由配置中直接定义 beforeEnter 钩子，它只会在进入该路由时触发。

const router = new VueRouter({  routes: [  {  path: '/foo',  component: Foo,  beforeEnter: (to, from, next) => {  // 逻辑判断...  next()  }  }  ]  
})

---

三、组件内的钩子

在 Vue 组件中，你可以使用以下路由钩子：beforeRouteEnter、beforeRouteUpdate（2.2+ 新增）、beforeRouteLeave。

• beforeRouteEnter：在路由进入该组件的渲染函数之前调用，此时组件实例尚未创建，因此无法访问 this。可以通过 next 的回调函数来访问组件实例。

• beforeRouteUpdate：当同一个路由重新渲染时调用，例如，对于带有动态参数的路由 /foo/:id，当 :id 发生变化时，该组件会被重新渲染。

• beforeRouteLeave：在导航离开该组件的对应路由时调用。

Vue 2 (Vue Router 3) 中

export default {  data() {  return {  // ...  }  },  beforeRouteEnter(to, from, next) {  // 组件尚未创建，无法访问 `this`  next(vm => {  // 访问组件实例 `vm`  })  },  beforeRouteUpdate(to, from, next) {  // 当前路由改变，但组件复用时调用  // 例如，对于带查询参数或动态段的路由 `/foo?a=1` 或者 `/foo/1`，  // 组件实例会被复用，此时这个钩子会被调用  this.someData = 'new data'  next()  },  beforeRouteLeave(to, from, next) {  // 导航离开该组件的对应路由时调用  // 可以访问组件实例 `this`  const answer = window.confirm('你确定要离开吗？')  if (answer) {  next()  } else {  next(false) // 取消导航  }  }  
}

Vue 3 (Vue Router 4)中

组件内钩子的使用方式在 Vue 3 中没有显著变化，但如果你使用 Composition API，你可能会更倾向于使用 onBeforeRouteEnter、onBeforeRouteUpdate 和 onBeforeRouteLeave 函数，这些函数可以与 setup 函数一起使用。

import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';  export default {  setup() {  onBeforeRouteEnter((to, from, next) => {  next(vm => {  // 访问组件实例  });  });  onBeforeRouteUpdate((to, from, next) => {  // ...当前路由改变，但组件复用时调用  next();  });  onBeforeRouteLeave((to, from, next) => {  // ...导航离开该组件的对应路由时调用  next();  };  // ...其他 Composition API 逻辑  }  
};

vue-router 3.x	vue-router 4.x
beforeRouteEnter	onBeforeRouteEnter
beforeRouteUpdate	onBeforeRouteUpdate
beforeRouteLeave	onBeforeRouteLeave

---

四、执行顺序

1. 当导航开始时，首先触发全局的 beforeEach 钩子。

2. 如果 beforeEach 钩子中没有取消导航，则继续执行路由独享的 beforeEnter 钩子（如果有定义的话）。

3. 在路由被确认（即解析完成）之后，但在组件渲染之前，会触发全局的 beforeResolve 钩子。

4. 如果导航继续，并且即将进入的组件有定义组件内的钩子，那么在组件实例创建之前会执行组件内beforeRouteEnter钩子

5. 路由改变完成，组件渲染之后，触发全局的 afterEach 钩子。

6. 如果组件被复用，例如对于带有动态参数的路由，当参数发生变化时，该组件会被重新渲染。这时会触发组件内beforeRouteUpdate钩子

7. 如果在导航过程中需要离开当前组件，那么会触发当前组件内的 beforeRouteLeave 钩子。

即：

1. 全局 beforeEach 钩子
2. 路由独享 beforeEnter 钩子
3. 全局 beforeResolve 钩子
4. 组件内beforeRouteEnter钩子
5. 全局 afterEach 钩子
6. 组件内beforeRouteUpdate钩子
7. 组件内的 beforeRouteLeave 钩子

1-5 进入的钩子
6 更新的钩子
7 离开的钩子

---

五、错误处理

Vue Router 4（适用于 Vue 3）中

可以使用 router.onError 方法来注册一个错误处理回调，用来检测和处理可能发生的错误。这个方法允许你定义一个函数，该函数会在路由导航过程中发生错误时被调用。

onError 并不是一个路由钩子（guard）或生命周期钩子，而是一个错误处理函数，可以注册到 Vue Router 实例上以便在路由导航过程中发生错误时进行处理。

以下是一个简单的示例，展示了如何在 Vue Router 4 中使用 onError 方法：

import { createRouter, createWebHistory } from 'vue-router';  const router = createRouter({  history: createWebHistory(),  routes: [  // 路由配置...  ],  
});  router.onError((error) => {  // 处理路由导航中发生的错误  console.error('路由导航发生错误:', error);  
});  export default router;

.

Vue Router 3（适用于 Vue 2）中

在 Vue Router 3 或更早的版本中，没有直接的 onError 方法，但你可以通过全局的 afterEach 钩子来检测和处理可能发生的错误。

例如，如果某个路由守卫中调用了 next(error)，可以在 afterEach 钩子中检测到这个错误并进行处理：

router.afterEach((to, from, failure) => {  if (failure) {  // 处理路由导航中发生的错误  console.error('路由导航发生错误:', failure);  }  
});

afterEach 钩子的第三个参数 failure 在 Vue Router 3.1.0 之后的版本中才被引入，用于传递导航失败时的错误信息。

总的来说，虽然 Vue Router 3 没有直接命名为 onError 的钩子，但可以通过上述方式在路由导航发生错误时进行捕获和处理。

这篇关于Vue Router 路由生命周期钩子/路由导航守卫的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---