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');
},
}
vue - 解决页面跳转到外部链接后,ios回退到本页面,生命周期,路由导航守卫钩子都无法触发的问题的更多相关文章
- vue项目中跳转到外部链接方法
当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...
- vue之生命周期与导航守卫
组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...
- vue项目跳转到外部链接
vue项目中遇到一个打印的功能.思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能. 所以,现在的问题是,怎样跳转到外部链接.开发vu ...
- 让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成
让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成 1.<a href="javascri ...
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- vue之路由导航守卫-全局前置守卫
一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...
- 【VUE】5.路由导航守卫
1. 功能需求 1. 当用户登陆成功后,把得到的token存到Session Storage 2. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果 ...
- vue 路由跳转到外部链接
尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...
- vue+el-menu设置了router之后如何跳转到外部链接
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="c ...
- 小程序web-view的使用,跳转到外部链接~
先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码: <view class="nav" hover-cla ...
随机推荐
- [Vs和Reshaper]Vs Studio配合Resharper插件,某些快捷键无法使用的情况,Alt+F7
一直使用Alt+F7来查找变量或者类型的使用位置 家里面的电脑某一天不可以用了,按了没有任何反应 后来查到竟然是被别的软件快捷键覆盖了 Alt+F7是被Nvidia GeForce覆盖了,关掉它或者修 ...
- Python-网络编程和多进程多线程开发
网络编程 osi7层模型 以通过访问网站发送请求数据为例,每一层会做如下的事情 应用层:规定数据的格式. "GET /s?wd=你好 HTTP/1.1\r\nHost:www.baidu.c ...
- 多点DLT (Direct Linear Transformation) 算法
阅读前可以先参看上一篇代数视觉博客: 四点DLT (Dierct Linear Transformation) 算法 对于大于4个点的数据点来进行 DLT 算法变换, 如果数据点的标注都十分准确,那么 ...
- sparksql的join有哪些及实现原理
sparksql的3种join实现 1.Broadcast Join (小表对大表) 在数据库的常见模型中(比如星型模型或者雪花模型),表一般分为两种:事实表和维度表. 维度表一般指固定的.变动较少的 ...
- Flink 状态后端及RocksDBStateBackend的优势
MemoryStateBackend(只用于本地开发和调试,不用于生产)和FsStateBackend(如果Flink作业的状态很小或需要很低的延迟,则应该考虑FsStateBackend),这两种都 ...
- ORACLE 遇到ORA-31693 ORA-31617 ORA-19505 ORA-27037
今天发现生产的RAC环境expdp计划任务出现报错 之前一度认为是备份目录权限的问题 官方文档: MOS参考文档:DataPump Export (EXPDP) Fails With Errors O ...
- golang 字符串函数
1. 统计字符串的长度,按字节进行统计 package main import "fmt" func main() { var s1 string = "hello,世界 ...
- 用例需注意的点-UI自动化
记几条--用例注意事项:用例从功能里面转化而来,并且不能脱离业务(针对某一个页面功能\某一个流程业务,写一条用例:即将界面操作间接转化为代码去操作!)1用例要尽量独立,相互不影响!(单独一条都可运行) ...
- 禅道服务崩溃 Can't init tc log
0.环境 禅道 版本12.4.3 数据库 10.1.22-MariaDB SQL 服务器 192.168.0.82 centos 7 step 1.问题 磁盘爆满后,禅道在启动时报数据库 Can' ...
- java后台接收参数为枚举,postman的json如何传入
使用postman测试接口,其中一个参数为枚举类型,如何传入参数? 1 枚举类型: public enum UserCourseOrderSourceType{ USER_BUY(1,"用户 ...