Vue.js如何仅在指定组件页面实现关闭/刷新标签页、站外跳转确认弹窗

核心思路 #

你遇到的问题本质是beforeunload事件绑定在了全局window上，没有和当前组件的生命周期绑定，所以会在全站所有页面触发。只需要将事件监听的绑定、移除逻辑和当前组件的生命周期绑定即可，组件加载时注册监听，组件销毁时移除监听，就可以实现仅当前页面生效的效果。

完整实现代码（Vue2 选项式API） #

export default {
  data() {
    return {
      // 业务控制字段：是否需要弹出离开确认，比如用户有未保存修改时设为true
      hasUnsavedChange: false
    }
  },
  // 组件挂载时注册beforeunload监听
  mounted() {
    // 将监听函数挂载到实例上，保证解绑时使用同一个引用
    this.beforeUnloadListener = (event) => {
      if (this.hasUnsavedChange) {
        const tip = '确定要离开吗？未保存的修改将会丢失'
        event.returnValue = tip
        return tip
      }
    }
    window.addEventListener('beforeunload', this.beforeUnloadListener)
  },
  // 组件销毁前移除监听，避免污染其他页面
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.beforeUnloadListener)
  },
  // 保留原有逻辑处理站内路由跳转
  beforeRouteLeave (to, from, next) {
    if (!this.hasUnsavedChange) {
      next()
      return
    }
    const answer = window.confirm('确定要离开吗？未保存的修改将会丢失')
    answer ? next() : next(false)
  }
}

注意事项 #

• beforeunload触发的是浏览器原生安全弹窗，无法自定义弹窗样式和提示文本，大部分现代浏览器会忽略你设置的returnValue内容，只会显示浏览器统一的默认离开提示，这是浏览器安全限制，没有规避方案。
• 注册和移除监听时必须使用同一个函数引用，不要直接传入匿名函数，否则会导致监听无法正常移除，依然会在全站生效。
• 你可以根据业务场景动态修改hasUnsavedChange的值，比如仅当用户修改了表单未提交时设置为true，不需要提示时设置为false即可。
• 如果使用Vue3组合式API，只需将监听注册逻辑放到onMounted钩子，移除逻辑放到onUnmounted钩子即可，逻辑完全一致。

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