vue 关闭 页面 事件

在 Vue 中，关闭页面的事件可以使用 `beforeRouteLeave` 钩子函数来实现。该钩子函数在路由离开该组件之前执行，可以用来做一些清理工作或者提示用户是否真的要关闭页面。

钩子函数的使用步骤如下：

1. 在组件中定义 `beforeRouteLeave` 钩子函数，该函数有三个参数：`to`（即将进入的路由）、`from`（即将离开的路由）和 `next`（必须调用该函数来完成守卫）。

2. 在 `beforeRouteLeave` 钩子函数中，检查一些条件来确定是否允许用户离开该页面，如果条件不满足，可以调用 `next(false)` 来取消离开操作；如果条件满足，直接调用 `next()` 即可。

下面是一个示例代码：

export default {
  // ...
  beforeRouteLeave(to, from, next) {
    // 检查一些条件
    if (this.isDirty) {
      if (window.confirm('你的修改还没有保存，确定要离开吗？')) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

在上面的代码中，我们在离开页面之前，检查了一个 `isDirty` 标志，如果用户做了一些修改但还没有保存，就弹出一个确认提示框，等待用户确认；如果用户点击了取消按钮，则调用 `next(false)` 来取消离开操作；如果用户点击了确定按钮，则调用 `next()` 来允许离开操作。

总之，`beforeRouteLeave` 钩子函数可以用来拦截页面的离开操作，从而实现一些定制化的用户体验和服务端数据保护。