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\');
    },
    
  }

 

相关文章