当前位置: 首页 > Web前端 > vue.js

工作问题总结2:H5开发,Android返回键问题

时间:2023-04-01 00:12:50 vue.js

1。组件中重写了路由跳转页面,存在需要跳转页面不允许用户返回的情况,如:支付、登录、注销等,请修改一下:1.this.$router.push()全部重写为this.$router.replace()2.全部重写为因为:this.$router.push会将浏览器的历史记录保存在window.histroy中。这样return键会返回到之前的路由,this.$router.replace不会保留在history中。2、子页面返回及改写以聊天界面为例:1、消息列表页每条消息的点击事件使用this.$router.push(),点击进入详情页,这样的地址主页记录在历史上。2.详情页左上角有返回按钮。这个返回按钮的跳转事件一定不能用this.$router跳转,否则会出现return混乱。而是使用this.router.back()或者this.router.go(-1),这样不仅可以成功返回到上一个页面,而且可以清除之前的历史记录。如果需要带状态或者带参数返回到上一个页面,我现在的做法是把子页面写成弹窗,悬浮在最顶层页面。3.通过获取页??面属性判断fallback,解决单点登录双击问题(window.location.href=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=url跳转,fallback会直接退出应用程序;使用applicationapi方法在返回上一页之前打开新页面A页5.h5中ios手机后页空白,需要下拉页面才能显示页面//cssoverflow-y:auto-webkit-overflow-scrolling:touchheight100%//vueupdated(){document.scrollingElement.scrollTop=0},6.H5嵌入原生应用调试工具//https://github.com/Tencent/vConsole