如何利用VUE监听网页关闭并执行退出操作
作者：Gua_guagua
这篇文章主要给大家介绍了关于如何利用VUE监听网页关闭并执行退出操作的相关资料,因为项目中需求,浏览器关闭时进行一些操作处理,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
最近在项目中遇到了一个需求，需要监听页面关闭，在页面关闭时弹出提示框，并在离开页面时触发退出操作。因为是用VUE进行开发的，所以先在mounted()中创建页面关闭的监听
window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
window.addEventListener("unload", (e) => this.unloadHandler(e));第一个监听的是页面关闭之前，对应的方法可以写做
// 页面关闭之前，触发提示框
beforeunloadHandler(e) {
if (e) {
e = e || window.event;
console.log(e);
if (e) {
e.returnValue = "关闭提示";
}
return "关闭提示";
}
},第二个监听的是页面关闭的时候，这里面可以调用退出登录的方法，但是记得要用同步调用的方法，axios默认的是异步调用的方法
// 页面关闭
async unloadHandler(e) {
// 退出登录
await this.handleGoLog();
},最后记得在destroyed()中，注销监听
destroyed() {
window.removeEventListener("beforeunload", (e) =>
this.beforeunloadHandler(e)
);
window.removeEventListener("unload", (e) => this.unloadHandler(e));
},补充知识：vue实现关闭浏览器退出登录功能（区别关闭和刷新）
在实现单点登录时，发现关闭浏览器后，并不会自动退出登录
data() {
return {
gap_time: 0,
beforeUnload_time: 0,
};
},
methods: {
// 关闭窗口之前执行
beforeunloadHandler() {
this.beforeUnload_time = new Date().getTime();
},
unloadHandler() {
this.gap_time = new Date().getTime() - this.beforeUnload_time;
//判断是窗口关闭还是刷新 毫秒数判断 网上大部分写的是5
if (this.gap_time <= 10) {
logOut() // 退出登录接口 这里应当换为个人的登出方法
} else {
}
},
},
destroyed() {
// 移除监听
window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
window.removeEventListener("unload", () => this.unloadHandler());
},
mounted() {
// 监听浏览器关闭
window.addEventListener("beforeunload", () => this.beforeunloadHandler());
window.addEventListener("unload", () => this.unloadHandler());
}然后，再关闭浏览器后，就会自动调用我们的退出登录函数了。
总结
到此这篇关于如何利用VUE监听网页关闭并执行退出操作的文章就介绍到这了,更多相关VUE监听网页关闭并退出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！