🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在Vue Router中，beforeRouteLeave是一个组件内的守卫，它在路由即将离开当前组件时调用。这个守卫可以用来提示用户是否确认离开当前页面，或者在离开前执行一些清理工作。

beforeRouteLeave守卫的作用

beforeRouteLeave守卫主要用于：

• 提示用户确认是否离开当前页面，以防止误操作。
• 在离开页面前执行一些清理工作，如取消网络请求、清除定时器或保存状态等。

如何使用beforeRouteLeave守卫

1. 在组件内定义beforeRouteLeave守卫

在Vue组件的选项中，可以通过beforeRouteLeave属性定义该组件的守卫。

export default {
// 组件的其他选项...

beforeRouteLeave(to, from, next) {
// to: 即将进入的目标路由对象
// from: 离开的路由对象
// next: 必须调用的函数，以决定路由跳转的结果

const answer = window.confirm('你确定要离开当前页面吗？');
if (answer) {
next(); // 用户确认，继续路由跳转
} else {
next(false); // 用户取消，中断路由跳转
}
}
};

2. 访问组件实例

在beforeRouteLeave守卫中，可以访问组件实例的this，因为此时组件仍然处于活跃状态。

beforeRouteLeave守卫的使用场景

组件内的beforeRouteLeave守卫通常用于以下场景：

• 在用户尝试离开页面时提示确认，以避免数据丢失或未保存的更改。
• 在离开页面前执行必要的清理工作，如取消未完成的网络请求、清除定时器等。

注意事项

• 必须调用next函数，否则导航将不会继续。
• 如果调用next(false)，则导航会被中断，用户将停留在当前页面。
• 在守卫中可以直接访问组件实例的this。

结论

beforeRouteLeave守卫是Vue Router提供的组件内守卫之一，它允许在路由即将离开当前组件时执行特定的逻辑。通过合理使用beforeRouteLeave守卫，可以提高用户体验，防止误操作，并确保在页面离开前完成必要的清理工作。