监听H5、APP返回，返回拦截并阻止返回至上一个页面hooks

业务场景：需要对H5页面进行返回拦截，监听浏览器返回操作，阻止用户离开或返回上一页

由于浏览器差异，部分手机或浏览器在用户首次进入页面时候，无法直接监听'popstate'事件，需要用户与屏幕页面进行交互后（点击或滑动手机屏幕）才可正常监听，待修复

除此之外，当用户对页面有操作时，可对浏览器返回进行拦截

由于浏览器机制，用户连续点击2次浏览器返回按钮为强制返回，无法修改，部分浏览器第一次返回可以检测到，用户如未与屏幕进行交互即使两次返回间隔时间较长也能触发浏览器强制返回机制

hook文件

// useListenerAppBack.ts文件


import { onUnmounted } from 'vue'

/**
 * 监听原生app返回事件并阻止返回到上一个页面
 */
export function useListenerAppBack(onAppBack: any) {
  const appBack = function () {
    window.history.back()
  }
  const appForward = function () {
    window.history.forward()
  }
  const appGo = function (delta: number | undefined) {
    window.history.go(delta)
  }
  if (!window.history.pushState) {
    return {
      appBack,
      appForward,
      appGo,
      changeHistoryState() {
        console.warn('Browser does not support pushState!')
      },
    }
  }
  const originState = history.state.current // 存储原始的状态
  // let statePushed = false;

  const changeHistoryState = function () {
    // 这里只需要再添加一个原始的状态即可
    console.log('修改历史记录状态', originState)
    window.history.pushState({ target: originState, random: Math.random() }, '', location.href)
  }

  const onPopstate = function (e: { state: { current: any, target: any } }) {
    console.log('监听到页面发生动作', e.state, originState)
    if (e.state && (e.state.current === originState || e.state.target === originState))
      onAppBack(e.state, originState)
  }

  // 监听 popstate 事件
  window.addEventListener('popstate', onPopstate, false)

  onUnmounted(() => {
    console.log('移除popstate事件监听')
    // 移除监听 popstate 事件
    window.removeEventListener('popstate', onPopstate, false)
  })

  return {
    appBack,
    appForward,
    appGo,
    changeHistoryState,
  }
};

使用方法：

index.vue

  // 返回拦截
  const { changeHistoryState, appBack } = useListenerAppBack((e) => {
    if (isClick.value) {
      downRef.value.open()
      isClick.value = false
    }
    else{
      appBack()
    }
  })

  onMounted(() => {
    changeHistoryState()
  })