又是一天见面的日子,春季盎然~ 已经无法在继续抒情下去了,写作水平骤降!!

今天记录下应用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移动端更改手机物理按键返回问题的更多相关文章

  1. python+appium模拟手机物理按键操作

    一句代码:driver.keyevent()        括号里填入的是手机物理按键的数字代号 driver.press_keycode()        括号里填入的是键盘按键的数字代号 手机物理 ...

  2. vue移动端 实现手机左右滑动入场动画

    app.vue <template> <div id="app"> <transition :name="transitionName&qu ...

  3. python+appium的物理按键代码

    代码就一句driver.keyevent()括号内填入的是物理按键的数字代号 代号表: 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOM ...

  4. js history对象 手机物理返回键

    有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...

  5. android4.0下如何判断手机是否有底部物理按键(menu物理按键)

    某些手机底部是在触摸屏内部有软按键,就是如(back,home,menu 等)而有的手机底部(非屏幕内部)有物理按键,就是生产厂商不愿意有google自带的虚拟按键,而做的电容式的物理按键,如(bac ...

  6. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  7. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  8. VueApp监听手机物理返回键的事件

    代码 第一步创建js文件夹子 在main里面引用   JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...

  9. appium 点击物理按键

    有时候我们遇到一些需要点击手机物理返回按键,或者home键等操作,总结如下: adb shell input keyevent 点击home键: adb shell input keyevent 3 ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议108:将类型标识为sealed

    建议108:将类型标识为sealed sealed能够阻止类型被其他类型继承.代码如下: sealed class SampleClass { } class OtherClass : SampleC ...

  2. CSS 实现等高布局以及多行文本垂直居中

    将display属性设置为table-cell,具有table的特点. 1.同行等高. 2.宽度自动调节. 相当于表格是td, <style type="text/css"& ...

  3. Oracle数据表转换为Shapefile(一)

    严格来说,文章标题中的“转换”并不完全合适.本文的主要内容是基于Oracle数据表的数据来生产出Shapefile文件.进行该工作的一个前提条件是:Oracle数据表中包含坐标数值字段,一般来说就是x ...

  4. ResorceGovernor--基础和Demo

    资源调控器分为三部分:1:资源池,将资源CPU/MEMORY划分到不同的载体上2:负载组,承载负载并将负载映射到不同的资源池3: 分类函数,将不同回话映射到不同的负载组08提供两种预定义的系统资源池1 ...

  5. Backup--压缩备份和数据库压缩

    1> 即使数据库启用了页压缩或行压缩,压缩备份也可以有效减小备份的大小,压缩备份的压缩效率取决于表中的数据类型 2> 数据库压缩有利于降低备份时间(因为数据库变小) 3> 对已启用压 ...

  6. Jenkins Pipeline+Maven+Gitlab持续集成构建

    http://www.cnblogs.com/xiaodai12138/p/9996995.html

  7. WPF判断当前窗体是否为模态

    WPF判断当前窗体是否为模态   1.使用System.Windows.Interop.ComponentDispatcher.IsThreadModal来判断 参照:https://social.m ...

  8. 如何快速解决myeclipse中导入jquery文件的报错。

    如何快速解决myeclipse中导入jquery文件的报错. 解决: 选中错误的文件, 点击右键, 选中myeclipse,点击Exclude From Validation.

  9. 881. Boats to Save People

    The i-th person has weight people[i], and each boat can carry a maximum weight of limit. Each boat c ...

  10. “全栈2019”Java第五十一章:继承与final关键字详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...