一、监听网页关闭并执行退出操作
1.mounted()中创建页面关闭的监听
window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
window.addEventListener("unload", (e) => this.unloadHandler(e));
2.监听的是页面关闭之前，对应的方法可以写做
// 页面关闭之前，触发提示框
beforeunloadHandler(e) {
if (e) {
e = e || window.event;
console.log(e);
if (e) {
e.returnValue = "关闭提示";
}
return "关闭提示";
}
},
3.监听的是页面关闭的时候，这里面可以调用自己的异步处理文章来源：https://www.toymoban.com/news/detail-737294.html
async myfuncation(e) {
//
await &&**********
},4.destroyed()中，注销监听文章来源地址https://www.toymoban.com/news/detail-737294.html
destroyed() {
window.removeEventListener("beforeunload", (e) =>
this.beforeunloadHandler(e)
);
window.removeEventListener("unload", (e) => this.unloadHandler(e));
},
二、VUE监听网页隐藏显示
mounted(){
//添加监听事件
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
document.addEventListener('visibilitychange',function(e){
console.log(document.visibilityState);
let state = document.visibilityState
if(state == 'hidden'){
console.log(document.visibilityState,'用户离开了');
}
if(state == 'visible'){
console.log(document.visibilityState,'回来了');
}
});
}到了这里，关于VUE监听网页关闭和隐藏显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
