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 는 동기 화 요청 을 수행 할 수 없 기 때 문 입 니 다.
사용자 가 현재 웹 페이지 를 닫 을 때 알림 을 꺼 내 는 방법
효 과 는 아래 그림 과 같다.

정상 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 는 감청 창 닫 기 이 벤트 를 실현 하고 창 이 닫 히 기 전에 요청 을 보 내 는 것 이 여러분 에 게 공 유 된 모든 내용 입 니 다.참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.