vue3 beforerouteleave使用示例
Vue 3 的 `beforeRouteLeave` 是一种路由导航守卫，用于在离开当前路由之前执行一些操作。它可以用来询问用户是否要离开当前页面，保存正在编辑的数据，或是做其他一些清理工作。在本文中，我们将深入探讨 `beforeRouteLeave` 的使用示例，并一步一步回答关于该主题的问题。
在开始之前，我们先确保已经安装了Vue以及Vue Router，并且已经设置好了基本的路由。
第一步是在要使用 `beforeRouteLeave` 的组件中导入 `vue-router` 和 `Composition API`。打开你的组件文件，通常是一个`.vue` 文件，并在顶部添加以下行：
javascript
import { useRouter, useRoute } from 'vue-router';
import { onBeforeRouteLeave } from 'vue';
第二步是定义要执行的操作函数。在组件定义的部分之前，添加以下代码块：
javascript
...
setup() {
  const router = useRouter();
  const route = useRoute();
  const beforeLeave = () => {
    在这里编写离开路由前的操作逻辑
  };
  onBeforeRouteLeave(beforeLeave);
  ...
}
...
在这段代码中，我们使用了 `onBeforeRouteLeave` 函数来注册 `beforeLeave` 函数，该函数将在离开路由之前执行。`router` 提供了路由导航相关的功能，`route` 提供了当前的路由信息。
现在，我们可以开始回答下面的问题。
# 1. 什么时候会触发 `beforeRouteLeave`？
当用户尝试离开当前路由时，例如点击浏览器的后退按钮、切换路由或关闭浏览器窗口时，`beforeRouteLeave` 会被触发。
# 2. 在 `beforeRouteLeave` 中可以执行哪些操作？
在 `beforeRouteLeave` 中，你可以执行一系列操作，例如：
- 确认用户是否要离开当前页面
- 校验表单输入并拦截导航行为
- 保存正在编辑的数据
- 取消当前的异步操作
- 清理工作，例如关闭 Websocket 连接或取消订阅
# 3. 如何询问用户是否要离开当前页面？
在 `beforeRouteLeave` 中，你可以使用 JavaScript 的 `confirm` 函数向用户显示一个询问框。根据用户的响应，你可以决定是否阻止导航行为。
以下是一个示例，当用户尝试离开当前编辑页面时询问是否保存修改：
javascript
const beforeLeave = () => {
  if (confirm('确定要离开吗？修改的数据将不会保存。')) {
    用户点击了确认按钮，允许导航行为继续
  } else {
    用户点击了取消按钮，阻止导航行为
    return false;
  }
};
# 4. 如何保存正在编辑的数据？
如果用户在当前页面上有正在编辑的数据需要保存，在 `beforeRouteLeave` 中你可以执行保存操作。例如，在离开页面前向服务器发送一个请求保存数据。
以下是一个示例，当用户尝试离开当前编辑页面时保存修改的数据：
javascript
import axios from 'axios';
const beforeLeave = async () => {
  try {
    await axios.post('/api/save-data', editedData);
    数据成功保存，允许导航行为继续
react router v6路由守卫  } catch (error) {
    数据保存失败，阻止导航行为
    ('保存数据失败:', error);
    return false;