此坑描述
订单详情某按钮点击,通过window.location.href跳转到(外部)第三方链接后,回退后,在ios中生命周期和路由导航钩子都失效了,无法触发。 在安卓中无视此坑, 回退没有问题
解决
原因:根据强大的度娘,大概了解此问题可能是因为缓存造成的,所以页面生命钩子,路由钩子没有触发
方案:onpageshow事件。 在用户浏览网页时触发 onpageshow 事件类似onload事件;
onload 事件在页面第一次加载时触发;onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发;
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');
},
}
禁止用户返回
const popstate = () =>{ // 禁止ios 返回事件
// if (isIOS()) {
window.history.pushState(null, null, document.URL);
window.addEventListener("popstate", function(e) {
window.history.pushState(null, null, document.URL);
})
// }
}