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中监听页面刷新与关闭

版权声明：本文为CSDN博主「qiao_qiao_happy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接： https://blog.csdn.net/qiao_qiao_happy/article/details/110222645