Vue2 使用 beforeunload 事件阻止浏览器刷新页面

• 在组件的created()生命周期中注册beforeunload事件处理函数

  created() {
    window.addEventListener('beforeunload', this.handleBeforeunload);
  },
  

• 在组件的beforeDestroy()生命周期中移除beforeunload事件处理函数：

  beforeDestroy() {
    window.removeEventListener('beforeunload', this.handleBeforeunload);
  },
  

• 实现handleBeforeunload函数,如果页面有内容，则阻止默认行为，并将returnValue属性设置为空字符串，这样浏览器会弹出确认框。如果用户点击确认离开页面，则浏览器会刷新页面，否则页面不会刷新。

  methods: {
    handleBeforeunload(event) {
      if (this.hasContent) { // hasContent为页面是否有内容的标志
        event.preventDefault();
        event.returnValue = '';
      }
    },
  },