Vue中如何检测标签页关闭/刷新事件？监听beforeunload遇异常

首先明确：unload事件本身就是页面卸载流程中的固定环节，无论你是否在beforeunload中触发离开确认提示，只要页面启动卸载流程，unload就会触发——这是浏览器的正常行为，并非异常问题。

你的代码逻辑是仅当changesHandler({},true)返回true（即存在未保存修改）时，才触发页面离开确认提示。如果没进入if代码块，说明无需阻止用户离开，浏览器会直接执行卸载流程，unload事件自然会触发，这完全符合预期。

如果你的实际需求是在无未保存修改时，完全不启用beforeunload的检测逻辑，可以优化代码逻辑：

• 仅在存在未保存修改时添加beforeunload事件监听，无修改时移除监听：

// 检测是否有未保存修改
const hasUnsavedChanges = this.changesHandler({}, true);
if (hasUnsavedChanges) {
  window.addEventListener("beforeunload", this.confirmLeave);
} else {
  // 移除监听，避免不必要的检测
  window.removeEventListener("beforeunload", this.confirmLeave);
}

另外，针对beforeunload的浏览器兼容问题，建议调整提示逻辑：

• 部分浏览器要求returnValue必须赋值非空字符串才能触发确认提示，空字符串可能不生效，可修改为：

confirmLeave(ev){
  if(this.changesHandler({},true)){
        ev.preventDefault();
        const promptText = "您有未保存的修改，确定要离开吗？";
        ev.returnValue = promptText;
        // 兼容部分浏览器的返回值要求
        return promptText;
  }
}

如果你的实际问题是即使没进入if代码块，浏览器仍弹出离开确认提示，那大概率是其他代码也绑定了beforeunload事件，或是changesHandler的逻辑存在漏洞（无修改时也返回true），需要针对性排查这两部分内容。

内容的提问来源于stack exchange，提问作者Abbas Shaikh