vue区分页面刷新或关闭
页面加载时只执行onload
页面关闭时只执行onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。这样我们可以在onbeforeunload中加一个标记,在onunload中判断该标记,即可达到判断页面是否真的关闭了。
- 先在 methods里面写两个方法
unloadFn() {
this._gap_time = new Date().getTime() - this._beforeUnload_time;
if(this._gap_time <= 5){
//关闭浏览器执行的代码或者接口<br> sessionStorage.clear();
} else {
//刷新我需要做的事情
sessionStorage.setItem('reload',1)
}
},
beforeunloadFn(e) {
this._beforeUnload_time = new Date().getTime();
e = e || window.event;
if (e) {
e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
}
return "您是否确认离开此页面-您输入的数据可能不会被保存";
}
- 在cerated或者在methods里面加入
var _t = this;
if(!!sessionStorage.getItem("reload")){
//刚刚解析了因为我实现的是刷新返回到上一页,所以刷新的时候我存了个sessionStorage,然后进来判断有这个就返回上一页,然后把sessionStorage去掉
_t.$router.go(-1);
sessionStorage.clear()
}
window.addEventListener("unload", e => this.unloadFn());
window.addEventListener("beforeunload", e => this.beforeunloadFn(e));
- 然后在离开当前页面的时候注销监听 destroyed里面
window.removeEventListener("unload", e => this.unloadFn());
window.removeEventListener("beforeunload", e => this.beforeunloadFn());
这里实现的原理是根据时间差来实现
注意的是当在你按着f5不动的情况下,onbeforeunload与onunload的时间差也会小于5,从而执行了关闭页面的代码,不管很少人会按住不放