虽然加班,最近心情还是可以的,没多少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');
}, }

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

  1. vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

  2. vue之生命周期与导航守卫

    组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...

  3. vue项目跳转到外部链接

    vue项目中遇到一个打印的功能.思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能. 所以,现在的问题是,怎样跳转到外部链接.开发vu ...

  4. 让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成

    让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边     点击链接后不跳转可以设置成     1.<a href="javascri ...

  5. Vue父子组件生命周期执行顺序及钩子函数的个人理解

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  6. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  7. 【VUE】5.路由导航守卫

    1. 功能需求 1. 当用户登陆成功后,把得到的token存到Session Storage 2. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果 ...

  8. vue 路由跳转到外部链接

    尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...

  9. vue+el-menu设置了router之后如何跳转到外部链接

    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="c ...

  10. 小程序web-view的使用,跳转到外部链接~

    先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码: <view class="nav" hover-cla ...

随机推荐

  1. js判断任意数值接近数组中的某个值

    可以是数组,也可以是数组对象,看需求定义 let val = '' for (let i = 0; i < this.allData.length; i++) { if (this.days & ...

  2. CSS滚动条样式修改::-webkit-scrollbar

    修改滚动条样式通过伪元素::-webkit-scrollbar:::-webkit-scrollbar - CSS(层叠样式表) | MDN (mozilla.org) :-webkit-scroll ...

  3. Flutter 登录与list列表demo

    import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends S ...

  4. golang 映射(map)

    1. 映射的定义 map是一种无序的基于key-value的数据结构,Go语言中map是引用类型,必须初始化(make)才能使用. map定义: map[KeyType]ValueType 其中,Ke ...

  5. Qt6.2 在Ubuntu20下提示 C++ 和 CMake 错误

    Qt6.2 在Ubuntu20下提示 CMake No CMake configuration found apt install libgl-dev 即可! 先是C++提示没有找到C++编译器,需要 ...

  6. dfs-入门模板

    模板 void dfs()//参数用来表示状态 { if(到达终点状态) { ...//根据题意添加 return; } if(越界或者是不合法状态) return; if(特殊状态)//剪枝 ret ...

  7. mathjs 数字处理

    // mathjs 四舍五入取整 val:值export function roundingInt(val) { if (val) { return math.round(val, 0) }}// m ...

  8. 打开Access时电脑出现蓝屏,错误编号0x00000116的问题解决

    Windows7 64位旗舰版,在打开Access 2013,Onenote 2013时均会出现蓝屏,现就出现蓝屏问题解决方法给大家做一个分享. 步骤: 1.右击我的电脑,打开设备管理器 2.按顺序1 ...

  9. word生成产生错误的原因

    技术背景 很多时候我们网站或者系统需要提供一些word文件,例如证明.docx或者订单.docx等文件供用户下载打印等. 用Java操作word文档,毫无疑问,当下最流行apache poi,对于po ...

  10. Kubernetes--资源注解

    资源注解 除了标签(label)之外,Pod与其他各种资源还能使用资源注解(annotation).与标签类似,注解也是"键值"类型的数据,不过它不能用于标签及挑选Kubernet ...