vue區分頁面關閉和刷新,看這一篇就夠了

首先我們要了解關閉和刷新所用到的事件

頁面加載時只執行onload
頁面關閉時只執行onunload
頁面刷新時先執行onbeforeunload，然后onunload，最后onload。這樣我們可以在onbeforeunload中加一個標記，在onunload中判斷該標記，即可達到判斷頁面是否真的關閉了。

了解了這個的話就可以開始寫代碼了

首先我以下代碼是實現刷新之后退出當前頁面，返回上一頁。

要實現其他的退出之后請求接口也是可以的，自行看備注實現

先在  methods里面寫兩個方法

 unloadFn() {
       this._gap_time = new Date().getTime() - this._beforeUnload_time;
          if(this._gap_time <= 5){
            //關閉瀏覽器執行的代碼或者接口
　　　　　　　　sessionStorage.clear();
           } else {
          //刷新我需要做的事情
            sessionStorage.setItem('reload',1)
        }
 },
    beforeunloadFn(e) {
      this._beforeUnload_time = new Date().getTime();
      e = e || window.event;
      if (e) {
        e.returnValue = "您是否確認離開此頁面-您輸入的數據可能不會被保存";
      }
      return "您是否確認離開此頁面-您輸入的數據可能不會被保存";
    }                

注意！在舊版瀏覽器中可以自定義提示文案，既是return后面返回的參數
但在新版的瀏覽中，已經不支持自定義彈窗。只能調用瀏覽器自帶的提示確認窗格

 

 

 

添加了方法我們需要加個監聽事件來執行我們的代碼
在cerated或者在methods里面加入

    var _t = this;
    if(!!sessionStorage.getItem("reload")){
    //剛剛解析了因為我實現的是刷新返回到上一頁，所以刷新的時候我存了個sessionStorage，然后進來判斷有這個就返回上一頁，然后把sessionStorage去掉
      _t.$router.go(-1);
      sessionStorage.clear()
    }
    window.addEventListener("unload", e => this.unloadFn());
    window.addEventListener("beforeunload", e => this.beforeunloadFn(e));    

然后在離開當前頁面的時候注銷監聽

 destroyed里面

    window.removeEventListener("unload", e => this.unloadFn());
    window.removeEventListener("beforeunload", e => this.beforeunloadFn());

 

這里實現的原理是根據時間差來實現

注意的是當在你按着f5不動的情況下，onbeforeunload與onunload的時間差也會小於5，從而執行了關閉頁面的代碼，不管很少人會按住不放