H5在跳转其他域名后，浏览器回退事件不会触发vue生命周期钩子导致回退时数据状态没有刷新

前言

在用vue3开发H5项目中，遇到我方页面需要跳转三方URL的情况，用的跳转方法是

 window.location.href = 'url'
 window.open('url', '_slef')

用了2种跳转方法，在用户跳转至三方url后，如果用浏览器回退按钮返回到我方H5，在ios中会遇到不会触发vue生命周期钩子事件，导致页面没有理想中刷新数据状态，所以找了一个方法解决

window.addEventListener('pageshow', function(event) {
    console.log('after , pageshow :',event);
});

 在实际运用中发现在谷歌浏览器调试的时候，pageshow没有被触发，但是会触发生命周期钩子

在ios调试的时候触发了pageshow但是没有触发生命周期钩子，Android还没测试过

所以在开发中，为了兼容可以都写上

onMounted(async () => {
  init()
  window.addEventListener('pageshow', () => {
    init()
  })
})

还有一个问题就是在ios端发现如果页面上用了computed计算监听数据，在跳转三方url回退的时候明明计算监听的数据变了这里但是并没有被监听到，所以如果有这方面需求最好在pageshow里面再获取一下值是否修改

因为浏览器回退事件相当于把他历史记录的页面打开了，有缓存，不会触发页面上的逻辑，有时候也监听不到数据的变化，具体还需根据业务情况而定

const isLoginStatusInit = ref(!isNullOrUnDef(systemInfo.getToken()))

const loginStatus = computed(() => {
  return isLoginStatus.value || isLoginStatusInit.value
})


onMounted(async () => {
  init()
  window.addEventListener('pageshow', () => {
    isLoginStatusInit.value = !isNullOrUnDef(systemInfo.getToken())
    init()
  })
})

这里就是因为在回退的时候页面数据并没有向理想那样更新，所以computed用了2次，一次监听页面页面正常逻辑，一次监听回退触发的