h5监听页面展示隐藏返回

在开发中遇到了需要监听页面隐藏展示（比如切到后台又切回来），这个时候我立马想到onShow生命周期，不过反应过来这个是微信小程序的。如果想在h5里面监听的话，只需要加一个监听器

document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState == 'visible') {
    //页面展示 
  } eles {
    //页面隐藏
  }
})

解决了这个问题，又来了一个新的问题，比如我开发的A页面，从A页面跳转到B页面，再从B页面返回到A页面，这个使用上面所说的visibilitychange是监听不到的，因为本质上讲A页面并没有被隐藏，这里不展开细说，只说怎么解决，那就是用另一个事件监听 popstate

window.addEventListener('popstate', async () => {
  //监听到页面返回
})

好的，又把这个问题解决了，但是出现了一个新的问题，那就是如果我使用了vue-router，在单页面应用里进行路由跳转，因为链接的变化，路由跳转也会被认为是页面之间的切换，因此也会触发popstate这个监听。
但这显然不是我想要的效果，因此我只好又拿出了另外一个事件监听: pageshow
eg: 这里使用popstate也可以完成需求，用全局参数记录一下是否路由跳转就行

window.addEventListener('pageshow', async () => {
 //监听到页面展示
 if (StoreModule.loadEnd) {//loadEnd为true即为页面加载完成
    //to do something
  }
})

pageshow，字面上就能看出是页面展示的意思，因此页面的最开始加载和从其他页面返回才会触发，而hash路由跳转的时候并不会触发，再用一个vuex保存一个页面是否加载完成的参数来判断，就能完美处理页面返回的监听处理逻辑了。