vue - 解决页面跳转到外部链接后,ios回退到本页面,生命周期,路由导航守卫钩子都无法触发的问题
虽然加班,最近心情还是可以的,没多少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'); }, }
一步一叩首,今天的自己比昨天好一点就行,明天的自己需追寻