Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求
網(wǎng)上很多博客說監(jiān)聽窗口關(guān)閉事件使用window.beforeunload,但是這個(gè)監(jiān)聽事件也會(huì)在頁(yè)面刷新的時(shí)候執(zhí)行,經(jīng)過百度和自己的實(shí)際測(cè)試,
終于解決了這個(gè)問題,代碼如下:
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 //判斷是窗口關(guān)閉還是刷新 if(this._gap_time<=5){ //如果是登錄狀態(tài),關(guān)閉窗口前,移除用戶 if(!this.showLoginButton){ $.ajax({ url: '/pictureweb/user/remove', type: 'get', async:false, //或false,是否異步 }) } } }, }
window.beforeunload事件在window.unload事件之前執(zhí)行。同時(shí)注意ajax請(qǐng)求方式必須為同步請(qǐng)求,所以不能使用axios,因?yàn)閍xios不能執(zhí)行同步請(qǐng)求。
補(bǔ)充知識(shí):vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示
效果如下圖
正常 js 頁(yè)面處理方式
window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '關(guān)閉提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '關(guān)閉提示'; };
vue 中處理方式
let _this = this window.onbeforeunload = function (e) { if (_this.$route.name == "dyyPerformanceCenterSale") { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '關(guān)閉提示1111'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '關(guān)閉提示222'; } else { window.onbeforeunload = null } };
針對(duì)很多同學(xué)說的沒有實(shí)現(xiàn) ,我這里在詳細(xì)描述一下 方法寫在 mounted里面 ,然后 記得把route name替換成自己當(dāng)前頁(yè)面。
以上這篇Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-05-05簡(jiǎn)單了解vue 插值表達(dá)式Mustache
這篇文章主要介紹了vue 插值表達(dá)式Mustache的相關(guān)資料,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue關(guān)于select組件綁定的值為數(shù)字類型的問題
這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類型的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09