关于vue.js:工作问题总结二H5开发安卓返回键问题

37次阅读

共计 1346 个字符,预计需要花费 4 分钟才能阅读完成。

1、路由跳转页面改写

在组件中,有须要跳转页面,并且不让用户返回的状况,例如:领取、登录、登记等。请做一下批改:

1、this.$router.push() 全副改写为 this.$router.replace()

2、<router-link to=”/”> 全副改写为 <router-link to=”/” replace>

因为: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. 通过获取页面属性判断回退

解决单点登陆点击两次回退的问题 (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 跳转,回退会间接退出利用;应用利用 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

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script>

正文完
 0