工作问题总结二(H5开发,安卓返回键问题)
1、路由跳转页面改写
在组件中,有需要跳转页面,并且不让用户返回的情况,例如:支付、登录、注销等。请做一下修改:
1、this.$router.push()全部改写为this.$router.replace()
2、
因为:this.$router.push会在window.histroy中保留浏览器的历史记录。
这样返回键会返回上一个路由,而this.$router.replace不会在history中保留。
2、子页面返回改写
以聊天界面为例:
1、消息列表页面
每条消息的点击事件使用this.$router.push(),点击进入详情页,这样保证histroy中记录着主页面的地址。
2、详情页面
左上角有个返回按钮,这个返回按钮的跳转事件千万不能用this.$router来跳转,否则会出现返回错乱。
而是使用this.router.back()或者this.router.go(-1),这样既能成功返回上一页,也会清除掉上一条history记录。
如果需要带状态或者参数返回上一页,我目前的方法是将子页面写成弹窗形式,悬浮在最顶层页面。
3. 通过获取页面属性判断回退
【工作问题总结二(H5开发,安卓返回键问题)】解决单点登陆点击两次回退的问题 (window.location.href = https://www.it610.com/article/url, 代码书写在单点登陆页面)
window.performance.navigation.type包含三个值:
0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式)
1 : TYPE_RELOAD (用户通过刷新,包括JS调用刷新接口等方式访问页面)
2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
window.addEventListener('pageshow', function (event) {
if(event.persisted || window.performance && window.performance.navigation.type == 2){
console.log('window.performance.navigation.type: '+ window.performance.navigation.type)
}
})
4. 跳转外链
window.location.href = https://www.it610.com/article/url 跳转,回退会直接退出应用;使用应用api方法打开新的页面,才可回退到上一个页面
5. h5中ios手机后退页面显示空白,需要下拉才展示页面
// css
overflow-y: auto
-webkit-overflow-scrolling: touch
height 100%// vue
updated() {
document.scrollingElement.scrollTop = 0
},
6. H5嵌入原生应用的调试工具
// https://github.com/Tencent/vConsole
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- jhipster|jhipster 升级无效问题
- 7.9号工作总结~司硕
- “精神病患者”的角度问题
- 高天天工作室|溧清的剧本4
- 解决SpringBoot引用别的模块无法注入的问题
- 如果你是一名工作乐之者,996的工作又算得了什么()
- 为什么985/211的学生能胜任工作获得老板的青睐。
- Hive常见问题汇总
- 姚老师互动问答会|姚老师互动问答会 # 问题001(如何更有智慧的和身边人分享金刚智慧())