vue区分页面关闭和刷新（转）

页面加载时只执行onload

页面关闭时只执行onunload

页面刷新时先执行onbeforeunload，然后onunload，最后onload。这样可以在onbeforeunload中获取时间戳，在onunload中判断时间戳，即可达到判断页面是否真的关闭了。

• 注意的是当在你按着f5不动的情况下，onbeforeunload与onunload的时间差也会小于5，从而执行了关闭页面的代码

mounted() {
    // 数据变动时
    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
    window.addEventListener('unload', (e) => this.unloadHandler(e));
},
methods: {
    // 方法
    beforeunloadHandler(event) {
        this.beforeUnloadTime = new Date().getTime();
        console.log('this.beforeUnloadTime', this.beforeUnloadTime);
        event = event || window.event;
        console.log(event);
        if (event) {
            event.returnValue = '关闭提示';
        }
        return '关闭提示'; // 新版的浏览中，已经不支持自定义弹窗。只能调用浏览器自带的提示确认窗格
    },
    unloadHandler() {
        console.log('this.beforeUnloadTime--', this.beforeUnloadTime);
        console.log(new Date().getTime() - this.beforeUnloadTime);
        let time = new Date().getTime() - this.beforeUnloadTime;
        if (time <= 5) {
            localStorage.setItem('close', 1); // 关闭
        } else {
            localStorage.setItem('Refresh', 2); // 刷新
        }
    }
},
beforeDestroy() {
    // 销毁之前
    window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
    window.removeEventListener('unload', (e) => this.unloadHandler(e));
}

注意：实际测试页面关闭也执行了onbeforeunload，只能用时间戳长短比较。