Vue关闭浏览器或标签页时发送数据失败，beforeunload绑定方法undefined如何解决

问题根因分析 #

• 方法调用错误：你代码中this.test是对方法属性的引用，没有添加调用运算符()，因此test方法根本没有执行，这是你看不到对应日志的直接原因。
• 页面卸载时请求被中断：beforeunload事件的执行窗口极短，普通的异步请求（如fetch、axios默认的异步请求）会被浏览器主动中断，浏览器会优先完成页面销毁流程，不会等待异步请求返回，因此会出现数据发送失败的情况。

实现方案 #

推荐方案：使用Navigator.sendBeacon() #

这个API是专门为页面卸载阶段发送数据设计的，浏览器会保证在后台完成请求发送，不会阻塞页面卸载流程，也不会被中断，是该场景的标准实现方案。
示例代码：

mounted() {
  window.addEventListener("beforeunload", this.unload);
},
beforeUnmount() {
  // 页面销毁前解绑事件，避免内存泄漏
  window.removeEventListener("beforeunload", this.unload);
},
methods: {
  unload() {
    // 组装要发送的表单数据，转成Blob格式适配更多服务端解析规则
    const postData = JSON.stringify({
      // 此处替换为你的表单字段
      formId: 123,
      content: "用户填写的内容"
    });
    const blob = new Blob([postData], { type: "application/json; charset=UTF-8" });
    // 调用sendBeacon发送数据，返回值表示请求是否成功入列浏览器发送队列
    const sendStatus = navigator.sendBeacon("你的服务端接口地址", blob);
    console.log("数据发送入列状态：", sendStatus);
  }
}

兼容方案：同步XMLHttpRequest（不推荐） #

如果需要兼容IE等不支持sendBeacon的老旧浏览器，可以使用同步的XMLHttpRequest，但是该方式会阻塞页面卸载，用户会感觉到关闭/刷新页面卡顿，仅作为兜底方案使用：

unload() {
  const xhr = new XMLHttpRequest();
  // 第三个参数设为false表示开启同步请求
  xhr.open("POST", "你的服务端接口地址", false);
  xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  xhr.send(JSON.stringify({
    // 此处替换为你的表单字段
  }));
}

注意事项 #

• sendBeacon发送的数据大小存在浏览器限制，通常为64KB，足够覆盖普通表单的数据量，如果数据过大建议提前裁剪核心字段。
• 服务端接口需要允许跨域请求，且正确配置请求头解析规则，避免出现跨域或者参数解析失败的问题。

内容的提问来源于stack exchange，提问作者Sergey Ka