微信瀏覽器中禁用後退按鈕並彈窗

最近在做專案的時候，有一個需求是當用戶點選微信瀏覽器自帶的後退按鈕時，阻止瀏覽器自帶的後退操作，並彈窗讓使用者自己選擇是否後退。下面來看具體的解決方案。

解決方法

從原理上來說，我們是無法阻止瀏覽器的後退操作的，包括使用event.preventDefault()。所以我們只能換一種思路，瀏覽器後退操作其實就是從歷史記錄棧中pop一個元素。所以，只要我們在進入應用的時候多push一個記錄，這樣當瀏覽器後退的時候pop的就是我們之前push的元素，從而達到保持當前的history state的目的，再通過監聽popstate事件，進行我們需要的一系列操作。

程式碼

pushHistory () {
    let state = {
        title: '',
        url: window.location.href
    };
    window.history.pushState(state, state.title, state.url);
}

首先是pushHistory，這個方式主要使用了瀏覽器中history的pushState方法，往state棧中push了一個新的state。

windowListener () {
    let that = this
    this.$vux.confirm.show({
        title: '提示',
        content: '確定要放棄此次編輯？',
        onCancel () {
            that.pushHistory()
        },
        onConfirm () {
            window.history.back()
            that.replace('/demo/mine')
        }
    })
 },
 

接下來是listener方法，當監聽到state變化的時候，進行彈窗，使用者點選取消時，再次使用pushHistory方法push一個state，這樣就可以實現禁用後退按鈕功能，確定的時候要使用一個window.history.back()，原因是發現使用replace跳轉出去後會存在一個空的state，導致後退按鈕點兩次才會生效，所以使用hisotry.back()方法後退一次，將空的state清除，這樣state棧就是正常的了。

mounted () {
    this.pushHistory()
    window.addEventListener('popstate', this.windowListener, false)
},
beforeDestroy () {
    window.removeEventListener('popstate', this.windowListener)
}
 

最後就是在mounted中對popstate的監聽和beforeDestroy中的解綁。