IOS系统在通过返回键返回到当前页面时，不触发vue的created和mounted。

问题描述

工作中遇到的一个问题。有一从企业微信系统跳转到我们系统的认证页面，当用户在系统中处理完问题后，点击返回键需要直接返回到认证页之前的上一个页面。此时在vue的created和mounted中写好了相关的处理逻辑。安卓系统测试没问题，但是ios多次测试都不生效。

原因分析

后来经过排查得知，是ios对网页有墓碑机制，已经浏览的A网页，跳转到下一个页面B时，当前A页面就被缓存,当从页面B点击返回，返回到A页面时，A网页的vue实例不会被重新加载，created和mounted并不会触发，导致了功能不生效。

解决方案

查阅资料后，采用

window.addEventListener('pageshow', function () {

})
window.addEventListener('pagehide', function () {

})

这个api，

在A页面初始化时，给vue的data中添加isPageHide，初始值为false，在mounted中添加监听器,

window.addEventListener('pageshow', function () {
  if (this.isPageHide) {
    window.location.reload()
  }
})
window.addEventListener('pagehide', function () {
  this.isPageHide = true
})

初始化时，isPageHide值是false，离开时，赋值为true。当监听到页面的pageshow事件后，检测isPageHide，如果是true，则重载页面，此时则能正常触发vue的生命周期。