记录一个Vue项目的特殊浏览器回退

在页面上弹框显示的时候，如果用户点击浏览器回退，不进行页面的跳转，只是关闭当前页面的弹框，当页面弹框没有显示的时候，点击浏览器回退，进行正常的回退。这里不讨论兼容，只在 Chrome 浏览器上实现的，如果你要做兼容，可以按照这个思路去实现。

需求分析

• 无弹框，点击回退，正常回退
• 有弹框，点击回退，关闭弹框

解决思路

既然需要在点击回退的时候做一些事情，那么首先我们就应该监听浏览器的回退事件，用户点击回退，判断弹框是否显示，如果显示，就阻止浏览器的默认回退行为，进行关闭弹框操作，如果没显示，就直接进行正常的回退。

关键代码

/**
 * 监听页面回退
 * @param {Function} callback 监听页面回退按钮要绑定的回调函数
 */
export const myGoBack = (callback) => {
  window.addEventListener('popstate', callback)
}

/**
 * 取消监听页面回退
 * @param {Function} callback 页面回退时候绑定的回调函数
 */
export const killGoBack = (callback) => {
  window.removeEventListener('popstate', callback)
}

// 在要使用的组件里面引入使用
methods: {
  /** 
   * 自定义的回退函数
   */
  goBack() {
    // 如果页面中弹框显示
    if (弹框显示状态) {
      // 禁用浏览器回退按钮事件
      history.pushState(null, null, document.URL)
      // 隐藏当前显示的弹框
      弹框显示状态 = false
    } else {
      // 否则，直接回退到上一个页面
      this.$router.go(-1)
    }
  }
},

// 元素挂载，监听回退
mounted() {
  myGoBack(this.goBack)
},

// 页面销毁，当前页面取消回退事件监听
beforeDestroy() {
  killGoBack(this.goBack)
}