Vue路由切换时移除beforeunload事件监听失效的问题

嘿，我看到你遇到的麻烦了——路由切换后，之前挂载的beforeunload监听器还在生效，关闭标签页依然会弹出确认框。这大概率是因为你添加和移除监听器时的参数不匹配导致的，咱们一步步来搞定它：

问题根源 #

你在mounted里添加监听器时，没有传入第三个参数useCapture（默认值是false），但在beforeRouteLeave里移除时却传了true。浏览器会把这两个调用当成不同的监听器操作，所以自然无法成功移除掉原来的那个。

另外，为了更稳妥，建议同时在组件的beforeUnmount钩子也做一次监听器移除，避免组件销毁时监听器残留。

修复步骤 #

1. 统一addEventListener和removeEventListener的第三个参数，保持一致（要么都不传，要么都传同一个布尔值）。
2. 在beforeUnmount钩子中也添加移除逻辑，覆盖组件销毁的场景。

修正后的代码示例 #

mounted: function () {
  // 这里可以选择不传第三个参数（默认false），或者明确传false，后面移除时保持一致
  window.addEventListener("beforeunload", this.detectTabClose);
},
beforeRouteLeave(to, from, next) {
  // 移除时和添加时的参数完全匹配，这里去掉第三个参数true
  window.removeEventListener("beforeunload", this.detectTabClose);
  next();
},
beforeUnmount() {
  // 组件销毁时也移除一次，双重保险
  window.removeEventListener("beforeunload", this.detectTabClose);
},
detectTabClose(e) {
  var confirmationMessage = "o/";
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;
}

如果之前你是故意想在捕获阶段监听，那只需要把mounted里的添加代码也加上第三个参数true就行，比如：

window.addEventListener("beforeunload", this.detectTabClose, true);

对应的移除代码也要保持true：

window.removeEventListener("beforeunload", this.detectTabClose, true);

这样调整后，路由切换或者组件销毁时，监听器都会被正确移除，关闭标签页就不会再弹出不必要的确认框啦！

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