用户退出当前页面时，修改的数据未进行保存，需要发送接口请求实现自动保存的功能。简单分析需求可知，退出页面包含 路由切换 和 **关闭浏览器标签 **页两种情况：

路由切换时，当前组件将会被销毁，由于 beforeDestroy 钩子函数是在组件销毁前被调用，可以直接拿到当前组件的 data，因此可以在 beforeDestroy 钩子函数中直接使用 axios 去调用接口，保存数据。
路由切换时调用接口保存数据的方式简单，不做过多赘述。

关闭浏览器标签页

请求时机：

回顾一下浏览器加载、刷新、卸载（关闭）时触发的事件：

刷新和卸载页面时都会先后触发 onbeforeunload 和 onunload 事件，但刷新页面的时候时不需要调用接口的，那么就需要区分刷新和关闭行为。

根据时间差来实现判断是刷新还是关闭标签：
在点击刷新或者关闭时开始计时记录下这一刻的时间戳，因为刷新和关闭 在执行onunload方法时的时间不一样，一般情况下经过测试：

mounted () {
  let beginTime = 0;
  let differTime = 0;
  window.onbeforeunload = function () {
    beginTime = new Date().getTime();
  window.onunload = function () {
    differTime = new Date().getTime() - beginTime;
    // 关闭页面操作
    if (differTime < 5) {
      // 请求接口数据
接口调用方案
由于 axios 库直接调用接口，后台无法收到请求，原因是当页面关闭销毁时，由于 axios 是异步的，http 请求就直接连接不上或者断开，导致无法向后台发送数据。

解决思路是：ajax 请求换成同步的，或者保持 http 连接。

ajax 设置为同步请求

原生方式：
var xhr = new XMLHttpRequest();
//打开请求, open方法第三个参数设置为false为同步请求
xhr.open('GET','js/data.json',false); //同步请求
// 发送请求
xhr.send(null);
目前高版本浏览器都不建议使用 XMLHttpRequest 对象方式发送同步请求
jQuery 方式：使用jq插件发送ajax请求时将 async 参数设置为 false 即可。

keepAlive

fetch 中设置 keepAlive 为 true 时，即使页面处于关闭状态也会保持连接，利用这个特性，可以发送可靠的请求。另外，使用 fetch 可以非常方便设置请求参数。
fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  body: JSON.stringify({
    some: "data",
  // 保持连接
  keepalive: true,
navigator.sendBeacon

navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能，这意味着：
数据发送是可靠的。
数据异步传输。
不影响下一导航的载入。
navigator.sendBeacon(
  "/log",
  JSON.stringify({
    some: "data",
sendBeacon API 不支持添加请求头，可以利用 Blob 做一些改动支持请求头。
const blob = new Blob([JSON.stringify({ some: "data" })], {
    type: "application/json; charset=UTF-8",
navigator.sendBeacon("/log", blob);
sendBeacon 本意是发送信标，所以通常是在设置页面埋点时使用，并且不需要发送太多的数据。
本文总结了用户退出当前页面前发送请求问题的一些解决方法，由于我的使用场景需要接口带上额外的参数和token，因此选择了使用 fetch api 设置 keepAlive 的方式实现退出该需求的。
参考文档：

如何处理页面关闭时发送HTTP请求

fetch Api - MDN

Navigator.sendBeacon()-MDN

杂记：关于 navigator.sendBeacon 接口

vue 判断窗口是关闭还是刷新 笔记

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求