vue移动端更改手机物理按键返回问题
又是一天见面的日子,春季盎然~ 已经无法在继续抒情下去了,写作水平骤降!!
今天记录下应用cordva+vue生成的apk 在手机物理返回时遇到的问题;
前提说~~应用vue,我们可以自定义上一路径和下一路径,其实就是在开发webapp时,我们通常会在webapp的头部导航栏自定义返回的上层路径,但是,手机的物理路径并不是像上层路由那样直接返回了,手机物理返回,按照html5 的history的路径进行返回,因此想要手机物理返回也按照我们和头部一样的返回,还需要自己定义;
方法一:
使用路由钩子 应用beforeRouterLeave路由离开时进行监听以及更改要返回的路径:代码如下:
beforeRouteLeave (to, from, next) {
this.$router.push({path: 'index'})//返回键要返回的路
}
缺点:如果页面上有其他的路由跳转,这样也会调用到beforeRouteLeave里面,这样其他的路由就会失效~有点不符合我们所需
基于方法1,进行加工
beforeRouteLeave (to, from, next) {
if (this.flag) {//这是一个点击事件
next(); //正常执行手机返回键也是正常返回上一个路由
} else {
if (from.path !== 'index') { //要离开的路由不是index
next();//
}
this.$router.push({path: 'index'})//返回键要返回的路由
}
}
优点:监控了页面其他路由的点击事件,这样在返回到指定的页面中肯定是无问题的,排除了其他路由的影响~给个赞
vue移动端更改手机物理按键返回问题的更多相关文章
- python+appium模拟手机物理按键操作
一句代码:driver.keyevent() 括号里填入的是手机物理按键的数字代号 driver.press_keycode() 括号里填入的是键盘按键的数字代号 手机物理 ...
- vue移动端 实现手机左右滑动入场动画
app.vue <template> <div id="app"> <transition :name="transitionName&qu ...
- python+appium的物理按键代码
代码就一句driver.keyevent()括号内填入的是物理按键的数字代号 代号表: 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOM ...
- js history对象 手机物理返回键
有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...
- android4.0下如何判断手机是否有底部物理按键(menu物理按键)
某些手机底部是在触摸屏内部有软按键,就是如(back,home,menu 等)而有的手机底部(非屏幕内部)有物理按键,就是生产厂商不愿意有google自带的虚拟按键,而做的电容式的物理按键,如(bac ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- VueApp监听手机物理返回键的事件
代码 第一步创建js文件夹子 在main里面引用 JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...
- appium 点击物理按键
有时候我们遇到一些需要点击手机物理返回按键,或者home键等操作,总结如下: adb shell input keyevent 点击home键: adb shell input keyevent 3 ...
随机推荐
- 路飞项目背景,contentType以及django缓存
昨日回顾: 分页器: 普通分页 # 普通分页 from rest_framework.pagination import PageNumberPagination -每页的大小(默认) -查询的时候, ...
- jQuary总结8:动画操作-自定义动画
1 自定义动画 语法: jQuery对象.animate(json,[speed],[easing],[callback]) 参数详解: -1 json:要执行动画的CSS属性,带数字(必选) -2 ...
- 在word上写博客直接发到CSDN博客
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
- Java多线程设计模式(二)
目录(?)[-] Guarded Suspension Pattern Balking Pattern Producer-Consumer Pattern Guarded Suspensi ...
- 小试maven工程
由于工作中要用到maven来进行开发j2ee开发,所以选用了集成maven的eclipse版本: 下载地址: https://www.eclipse.org/downloads/ 根据提示下载32或者 ...
- Android-原生对话框
package liudeli.ui.all; import android.app.Activity; import android.app.AlertDialog; import android. ...
- [转]一次Delete&Insert引发的Mysql死锁
近日遇到一个比较奇怪的deadlock错误, 错误详情: Deadlock found when trying to get lock; try restarting transaction; nes ...
- [LeetCode 题解]: Maximum Depth of Binary Tree
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- HttpWebRequest(System.Net)模拟HTTP发送POST
相关参考网上很多,但需要理解并转成自己的情况 public static string HttpWebRequestPost(string url, string param) { HttpWebRe ...
- MongoDB基础知识记录
MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...