欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2020年09月01日 09:21:20   作者:沙門空海  
這篇文章主要介紹了Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

網(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)

    Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)

    這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue3中vite使用sass的配置方法

    vue3中vite使用sass的配置方法

    這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-01-01
  • vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼

    vue2.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
  • vue3 使用socket的完整代碼

    vue3 使用socket的完整代碼

    這篇文章主要介紹了vue3 使用socket的完整代碼,包括vue3客戶端和服務(wù)端的實(shí)例講解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • 簡(jiǎn)單了解vue 插值表達(dá)式Mustache

    簡(jiǎn)單了解vue 插值表達(dá)式Mustache

    這篇文章主要介紹了vue 插值表達(dá)式Mustache的相關(guān)資料,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07
  • Vue2 Element el-table多選表格控制選取的思路解讀

    Vue2 Element el-table多選表格控制選取的思路解讀

    這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕

    vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue3中如何實(shí)現(xiàn)定義全局變量

    vue3中如何實(shí)現(xiàn)定義全局變量

    這篇文章主要介紹了vue3中如何實(shí)現(xiàn)定義全局變量,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue關(guān)于select組件綁定的值為數(shù)字類型的問題

    vue關(guān)于select組件綁定的值為數(shù)字類型的問題

    這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類型的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 詳解vue服務(wù)端渲染(SSR)初探

    詳解vue服務(wù)端渲染(SSR)初探

    本篇文章主要介紹了詳解vue服務(wù)端渲染(SSR)初探,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06

最新評(píng)論