监听浏览器后退事件

监听浏览器后退事件（手机经过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实现一样效果，且无上述缺点