vue实现浏览器关闭或刷新弹窗提示（beforeunload/unload)

---

vue实现浏览器关闭或刷新弹窗提示
也可以在时候强制保存记录或执行其他操作。

一、推荐代码

export default {
  data () {
    return {
    }
  },
  
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeUnloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeUnloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  },
  methods: {
    beforeUnloadHandler(e) {
      e.returnValue = '确定离开页面吗？';
      return " ";
    },
    unloadHandler(e) {
      e.returnValue = '确定离开页面吗？';
      return " ";
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

代码说明：
有些浏览器会限制在 beforeunload 事件中触发 alert，confirm 或 prompt 等弹出式的用户交互。这是为了防止滥用这些弹窗干扰用户的操作。
虽然在 beforeunload 事件中弹出这些窗口通常被浏览器禁止，但你仍然可以在这个事件中修改 event.returnValue 的值来显示一个提示给用户。但这种方式无法自定义内容，只能显示浏览器默认的文本。

beforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
unload 事件在即将离开当前页面（刷新或关闭）时触发。

二、错误情况说明

1.在beforeunload事件里面加alert

代码：

window.onbeforeonload = function(){
window.alert("A");
}
1
2
3

报错：
Blocked alert() during beforeunload.

2.在一个没有焦点的 iframe 或 frame 浏览器会阻止 beforeunload 弹窗

报错：
Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had...
说明：
用户有操作了点击界面后再刷新/关闭窗口才会触发。

3.无法触发destroyed/beforedestroyed/deactivated

原因：keepAlive设置为true时，
不会触发beforedestroyed，destroyed等方法
而且，deactivated 钩子在使用 keep-alive 组件缓存时触发，而页面刷新会清除所有的缓存，所以在这种情况下，deactivated 钩子也不会执行。

4.能触发beforeRouteEnter，但不能触发beforeRouteUpdate、beforeRouteLeave

原因：

• beforeRouteEnter：在进入该路由前被调用，通常用于在组件渲染前获取数据等操作。
• beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。
• beforeRouteLeave：在离开当前路由时被调用。

如果 beforeRouteEnter 能够触发而其他两个却无法触发，可能是因为路由的变化并不会触发组件的重新渲染，而是进行了复用。beforeRouteUpdate 和 beforeRouteLeave 都是针对组件复用时触发的。