快捷導(dǎo)航

Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求

更新時(shí)間：2020年09月01日 09:21:20 作者：沙門空海

這篇文章主要介紹了Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

網(wǎng)上很多博客說監(jiān)聽窗口關(guān)閉事件使用window.beforeunload,但是這個(gè)監(jiān)聽事件也會(huì)在頁面刷新的時(shí)候執(zhí)行，經(jīng)過百度和自己的實(shí)際測試，

終于解決了這個(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請求方式必須為同步請求，所以不能使用axios,因?yàn)閍xios不能執(zhí)行同步請求。

補(bǔ)充知識：vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示

效果如下圖

正常 js 頁面處理方式

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
   }
  };

針對很多同學(xué)說的沒有實(shí)現(xiàn) ，我這里在詳細(xì)描述一下方法寫在 mounted里面，然后記得把route name替換成自己當(dāng)前頁面。

以上這篇Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue之Element-Ui輸入框顯示與隱藏方式
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
通過vue-cropper選取本地圖片自定義裁切圖片比例
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
Vue.js實(shí)現(xiàn)文章評論和回復(fù)評論功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)文章評論和回復(fù)評論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue使用el-table篩選tree樹形結(jié)構(gòu)的數(shù)據(jù)問題
這篇文章主要介紹了vue使用el-table篩選tree樹形結(jié)構(gòu)的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Element中Select選擇器的實(shí)現(xiàn)
本文主要介紹了Element中Select選擇器的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue實(shí)現(xiàn)自定義H5視頻播放器的方法步驟
這篇文章主要介紹了vue實(shí)現(xiàn)自定義H5視頻播放器的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
對類Vue的MVVM前端庫的實(shí)現(xiàn)代碼
這篇文章主要介紹了對類Vue的MVVM前端庫的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
Element的Pagination分頁sync問題小結(jié)
本文主要介紹了Element的Pagination分頁sync問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue?組件通信的多種方式
這篇文章主要介紹了vue?組件通信的幾種方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03