vue项目使用js监听浏览器关闭、刷新、后退事件实现方法

window.addEventListener('beforeunload', function (e) {
    // 兼容不同浏览器的提示方式
    var confirmationMessage = '您确定要离开吗？';
    e.returnValue = confirmationMessage;  // Gecko, Trident, Chrome 34+
    return confirmationMessage;           // Gecko, WebKit, Chrome <34
});

window.addEventListener('unload', function(event) {
    // 执行一些清理操作
});

router.beforeEach((to, from, next) => {
    // 可以在这里处理后退逻辑
    // to 和 from 是路由对象
    next(); // 确保要调用next()方法，否则钩子就不会被resolved
});

methods:{
	onPopState(e) {
		// 监听到浏览器回退事件（这里提示用的confirm，是可以自定义的）
		if (confirm('离开当前页面数据可能会丢失，您确定离开当前页面吗？')) {
			// 点击确定回退
			window.removeEventListener('popstate', this.onPopState)
			window.history.go(-1)
		} else {
			// 点击取消不回退
			window.history.pushState(null, null, window.location.href)
		}
	},
}，
 mounted() {
		// 添加 popstate 事件监听
		window.history.pushState(null, null, window.location.href);
		window.addEventListener('popstate', this.onPopState);
   },
beforeDestroy() {
	// 在组件销毁前，移除 popstate 事件监听
	window.removeEventListener('popstate', this.onPopState)
}

if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
    console.info("这是一个刷新页面的操作");
} else {
    console.info("这是一个新访问页面的操作");
}

 mounted() {
    let beginTime = 0; //开始时间
    let differTime = 0; //时间差
    window.onunload = function () {
      differTime = new Date().getTime() - beginTime;
      if (differTime <= 5) {
        console.log("这是关闭");
      } else {
        console.log("这是刷新");
      }
    };

    window.onbeforeunload = function () {
      beginTime = new Date().getTime();
    };
  },
};