vue - 解决页面跳转到外部链接后,ios回退到本页面,生命周期,路由导航守卫钩子都无法触发的问题

时间:2024-02-16 22:24:05

虽然加班,最近心情还是可以的,没多少bug找上门。

乐级生悲,遇到了个奇葩的坑,花了点时间百度才解决。。。但我离不开的‘板砖’是安卓的,对此坑是抗拒的,完全没问题。。。

#此坑描述

...订单详情某按钮点击,通过window.location.href跳转到(外部)第三方链接后,回退后,在ios中生命周期和路由导航钩子都失效了,无法触发。
...在安卓中无视此坑, 回退没有问题

#解决

解决方案原因:根据强大的度娘,大概了解此问题可能是因为缓存造成的,所以页面生命钩子,路由钩子没有触发

解决方案提供:onpageshow事件。 在用户浏览网页时触发       

         onpageshow 事件类似onload事件;

                         onload 事件在页面第一次加载时触发;

                         onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发;

解决方案验证:找了几个ios机,一切ok

created () {
    window.addEventListener(\'pageshow\', () => {
        //回退到vue应用执行的操作
    })
}

#例子

注:组件销毁时最好销毁pageShow事件,避免消耗

 created() {
    //处理跳转外部链接后,ios回退标题不改变问题
    if (this.$store.state.isIOS) {
      window.addEventListener(\'pageshow\', this.setNav)
    }
  },
 beforeDestroy(){
    if (this.$store.state.isIOS) {
      window.removeEventListener(\'pageshow\', this.setNav)
    }
  },
  methods:{
     // 设置标题
    setNav(){
      console.log(\'aaaaaaa----\');
      window.$native.setNavTitle(\'订单详情\', \'\', \'\')
      console.log(\'bbbbbbbbbbb\');
    },
    
  }