【微信公众号】H5 vue 监听页面刷新

应项目需求 在刷新页面时重新登录到首页

则利用了路由守卫beforeEach 进行监听 刷新页面动作

首先监听是否授权过 只在授权过后的刷新 进入逻辑处理 不然会在授权的时候跳转回调页会出现问题

监听刷新方法 Android 和ios 方式不一样这一点是大部分人出现的问题

因为ios 有自己的方法 所以在处理逻辑的时候 先通过自带方法 navigator.userAgent.toLowerCase() 获取判断当前手机的类型

1.android的刷新则很简单 就是直接使用js的监听刷新方法 window.onbeforeunload  注意return （true，false，' '）三种 或者 return 处理函数 这边我是直接把处理的 放在方法内 如果刷新的时候要用户点击确认才能刷新 return true或者提示的文字 

2.ios 用户离开网页时触发 pagehide 设定pagehide window.addEventListener("pagehide", myUnloadHandler，false)

myUnloadHandler为相对应要处理的函数 

router.beforeEach(async function (to, from, next) {
  console.log([to, 54])
  console.log([from, 55])
  var ua = navigator.userAgent.toLowerCase()
  if (store.getters.code) {
    // H5页面刷新时触发
    let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
    console.log([isAndroid, 'isAndroid'])
    if (!isAndroid) {
      window.addEventListener("pagehide", myUnloadHandler, false)
      function myUnloadHandler () {
        store.commit('code', '')
        store.commit('doctorInfo', '')
        store.commit('userInfo', '')
        store.commit('userData', '')
        store.commit('roleType', '')
        store.commit('unload', to.path)
      }
    } else {
      window.onbeforeunload = function (e) {
        e = e || window.event;
        store.commit('code', '')
        store.commit('doctorInfo', '')
        store.commit('userInfo', '')
        store.commit('userData', '')
        store.commit('roleType', '')
        store.commit('unload', to.path)
        return ''
      }
    }
  }
  next()
})