监听浏览器自带刷新、前进、回退、关闭标签页、切换标签页

mounted() {
    // 监听浏览器前进回退
    window.addEventListener('popstate', () => this.handleBack(), false)
    // 监听标签页关闭和刷新
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
    // 监听浏览器切换标签页
    document.addEventListener('visibilitychange', this.changePage())
  },
  beforeDestroy() {
    // 监听浏览器前进回退
    window.removeEventListener('popstate', this.handleBack())
    // 监听标签页关闭和刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
    // 监听浏览器切换标签页
    document.removeEventListener('visibilitychange', this.changePage())
  }

1、监听浏览器切换标签页

changePage() {
    console.log('监听浏览器返回前进')
}

2、监听浏览器自带前进回退按钮，是无法精确识别到当前进行的操作（同时会监听前进和回退方法）

handleBack() {
    console.log('监听浏览器返回前进')
}

3、监听浏览器自带刷新按钮，是无法精确识别到当前进行的操作（同时会监听标签页关闭和刷新方法）

        首先在写这个方法前，我们要了解这个监听的逻辑：

                3.1 页面加载时只执行onload事件。

                3.2 页面关闭时，先onbeforeunload事件，再onunload事件。

                3.3 页面刷新时先执行onbeforeunload事件，然后onunload事件，最后onload事件。

        其次，我们可以提供计算时间差判断当前监听的是刷新还是关闭标签页，这个的时间差是存在误差的，因此存在可能不适用于小部分情况或者浏览器。如果需要同时有监听浏览器前进回退方法，需要在浏览器刷新的地方重新注册监听事件。

beforeunloadHandler() {
    this.beforeUnloadTime = new Date().getTime()
},
unloadHandler() {
    this.gapTime = new Date().getTime() - this.beforeUnloadTime
    //判断是窗口关闭还是刷新
    if (this.gapTime <= 5) {
        console.log('关闭窗口')
    } else {
        console.log('浏览器刷新')
        // 浏览器刷新后重新注册监听前进后退方法(刷新导致监听失效)
        window.addEventListener('popstate', () => this.handleBack(), false)  
    }
}