Vue JS中如何借助JavaScript处理onbeforeunload逻辑实现HTML标签表单提交

数据老陈

2026-9-29

Vue中实现onbeforeunload关闭页面提醒

不要直接给window.onbeforeunload赋值，否则会覆盖其他地方绑定的同事件逻辑，建议用事件监听的方式绑定，组件卸载时记得移除事件避免内存泄漏。

选项式API（Vue2/Vue3都支持）

export default {
  mounted() {
    window.addEventListener('beforeunload', this.handlePageUnload)
  },
  beforeUnmount() {
    window.removeEventListener('beforeunload', this.handlePageUnload)
  },
  methods: {
    handlePageUnload(e) {
      const dialogText = '你有未保存的修改，确定要离开吗？'
      e.returnValue = dialogText
      return dialogText
    }
  }
}