Vue实现监听窗口关闭事件,并在窗口关闭前发送请求

⽹上很多博客说监听窗⼝关闭事件使⽤window.beforeunload,但是这个监听事件也会在页⾯刷新的时候执⾏，经过百度和⾃⼰的实际测试，

终于解决了这个问题，代码如下：

mounted() {

window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) },

destroyed() {

window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.removeEventListener('unload', e => this.unloadHandler(e)) },

methods: {

beforeunloadHandler(){

this._beforeUnload_time=new Date().getTime(); },

unloadHandler(e){

this._gap_time=new Date().getTime()-this._beforeUnload_time; debugger

//判断是窗⼝关闭还是刷新 if(this._gap_time<=5){

//如果是登录状态，关闭窗⼝前，移除⽤户 if(!this.showLoginButton){ $.ajax({

url: '/pictureweb/user/remove', type: 'get',

async:false, //或false,是否异步 }) } } },}

window.beforeunload事件在window.unload事件之前执⾏。同时注意ajax请求⽅式必须为同步请求，所以不能使⽤axios,因为axios不能执⾏同步请求。

补充知识：vue如何在⽤户要关闭当前⽹页时弹出提⽰效果如下图

正常 js 页⾯处理⽅式

window.onbeforeunload = function (e) { e = e || window.event;

// 兼容IE8和Firefox 4之前的版本 if (e) {

e.returnValue = '关闭提⽰'; }

// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提⽰';};

vue 中处理⽅式

let _this = this

window.onbeforeunload = function (e) {

if (_this.$route.name == \"dyyPerformanceCenterSale\") { e = e || window.event;

// 兼容IE8和Firefox 4之前的版本 if (e) {

e.returnValue = '关闭提⽰1111'; }

// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提⽰222'; } else {

window.onbeforeunload = null } };

针对很多同学说的没有实现 ，我这⾥在详细描述⼀下 ⽅法写在 mounted⾥⾯ ，然后 记得把route name替换成⾃⼰当前页⾯。

以上这篇Vue 实现监听窗⼝关闭事件,并在窗⼝关闭前发送请求就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。