監聽瀏覽器後退事件

監聽瀏覽器後退事件（手機經過JS監聽返回按鈕事件）

在開發過程當中咱們常常遇到須要自定義返回按鈕跳轉到指定位置，而並不是按照歷史紀錄一級一級向後跳轉

本文將詳細介紹如何利用瀏覽器自帶的popstate事件監聽瀏覽器返回事件，並跳轉到指定位置

popstate

The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

上面這段內容是MDN Web docs 對popState事件的說明，翻譯過來爲：

當活動歷史記錄條目更改時，將觸發popstate事件。若是被激活的歷史記錄條目是經過對history.pushState（）的調用建立的，或者受到對history.replaceState（）的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。

須要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在作出瀏覽器動做時，纔會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）

不一樣的瀏覽器在加載頁面時處理popstate事件的形式存在差別。頁面加載時Chrome和Safari一般會觸發(emit )popstate事件，但Firefox則不會。

總結來講：

popstate事件只有瀏覽器返回按鈕以及history.back()事件更改歷史記錄時觸發，hhistory.pushState()或history.replaceState()事件不會觸發popstate事件

使用方法

if (window.history && window.history.pushState) {
    window.onpopstate = function() {
      //後退按鈕觸發事件
    }
  }
複製代碼

Vue實例

在瀏覽器開發中，實際上咱們必不能真正的監聽到瀏覽器自帶的後退按鈕事件，移動開發中，不一樣過封裝程序，咱們也不能單純的經過js代碼監聽到手機的後退按鈕事件。此處咱們經過監聽瀏覽器history的改變結合vuex-store實現模擬監聽瀏覽器後退按鈕的效果

1.在store中定義瀏覽器後退事件(用於判斷當先後退事件是否有其餘操做)

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
var state = {
  backEvent: null
},
getters = {
  backEvent(state,getters){
    return state.backEvent
  }
},
mutations = {
  backEvent(state,val) {
    state.backEvent = val
  }
};
export default new Vuex.Store({
  state,
  getters,
  mutations
})
複製代碼

2.在App.vue中監聽history的變化

export default {
  computed:{
    backEvent() {
      return this.$store.getters.backEvent;
    }
  },
  mounted() {
    var that = this;
    if (window.history && window.history.pushState) {
      window.onpopstate = function() {
        if(that.backEvent){
          that.backEvent()
          that.$store.commit('backEvent',null)
        }
      }
    }
  }
}
複製代碼

缺點：

1.popState僅僅是監聽history改變，並不能阻止瀏覽器的後退事件。即：不管咱們在backEvent中作了何種處理，路由其實是發生了更改的，當前頁面也進行了從新加載。

本文實例也可經過監聽vue-router實現一樣效果，且無上述缺點