在 Vue.js 的路由中，我们经常需要在路由切换之前执行一些逻辑，例如确认是否离开当前页面或者在路由更新之前更新一些数据。Vue 3 提供了两个组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate，方便我们处理这些逻辑。

onBeforeRouteLeave

onBeforeRouteLeave 是一个组件内的路由守卫，用于在离开当前页面之前执行一些逻辑。它在组件实例销毁之前被调用，可以用来询问用户是否确认离开当前页面，或者进行一些数据的保存操作。

在组件内声明 onBeforeRouteLeave 路由守卫，可以通过以下方式：

import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave((to, from, next) => {
  // 在这里执行一些逻辑
  // 例如询问用户是否确认离开当前页面或者保存数据
  // 如果需要离开页面，则调用 next() 方法
  // 如果不需要离开页面，则调用 next(false) 方法
});

在上面的例子中，我们可以根据实际需求来决定是否离开当前页面。如果用户确认离开页面，则调用 next() 方法；如果不需要离开页面，则调用 next(false) 方法。

onBeforeRouteUpdate

onBeforeRouteUpdate 是另一个组件内的路由守卫，用于在路由更新之前执行一些逻辑。它在当前组件被复用，但是参数发生改变时被调用，可以用来更新一些数据或执行其他操作。

在组件内声明 onBeforeRouteUpdate 路由守卫，可以通过以下方式：

import { onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate((to, from, next) => {
  // 在这里执行一些逻辑
  // 例如根据新的路由参数更新数据
  // 更新完成后调用 next() 方法继续路由更新
});

在上面的例子中，我们可以根据新的路由参数来更新数据或执行其他操作。更新完成后，调用 next() 方法继续路由更新。

总结

在 Vue 3 的路由中，我们可以利用组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate 来处理离开当前页面和路由更新之前的逻辑。这两个路由守卫提供了很大的灵活性，可以按需执行一些操作，帮助我们更好地控制路由的行为。

希望本篇博客对你了解 Vue 3 的路由组件内的路由守卫有所帮助！如果想了解更多关于 Vue.js 的内容，请继续关注本博客。谢谢阅读！

本文来自极简博客，作者：心灵画师，转载请注明原文链接：Vue3-37-路由-组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate