Vue中监听页面刷新和关闭beforeunload事件

代码
在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件

  mounted () {
   	window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  destroyed () {
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn (e) {
      // 这个事件只有在鼠标真正和浏览器有了交互，再刷新或者关闭时才会触发, 浏览器事件会弹框确认用户是否要离开页面
      e = e || window.event
      if (e) {
        e.returnValue = '关闭提示'
      }
      return '关闭提示'
    }
   }

Window: beforeunload event 事件说明 Window: beforeunload event 事件说明
对应代码中的 e.returnValue = '关闭提示' 和 return '关闭提示' 以支持所有浏览器事件

可以参考文章 Vue中监听页面刷新与关闭