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'})//返回键要返回的路由 }
}
优点:监控了页面其他路由的点击事件,这样在返回到指定的页面中肯定是无问题的,排除了其他路由的影响~给个赞????
方法二:
cordova 打包成apk时应用的webview的内核,因此可以应用页面监听的方法:popstate方法对页面返回时进行监听~~
mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.fun, false);//false阻止默认事件 } }, destroyed(){ window.removeEventListener('popstate', this.fun, false);//false阻止默认事件 }, methods:{ fun(){ this.$router.push({'name':'index'}); } },
在vue的mounted阶段添加监听函数~~,触发后可以调用fun函数进行自定义的返回路由,返回后进行停止监听
缺点:如果是大型的页面,多处都存在自定义的返回路径,这也是一笔不少的代码,经过验证,这是一个很好的方法,但是这个方法有一定的缺点,如果页面中存在着报错,那就无法执行这个代码了(比如,我们引用了一些框架,可能会缺少参数,直接堵塞了)
方法三:
全局定义:更适合退出app系统;首先要安装mui的框架 npm就好了~
将下面的这段代码直接插入到index.html中,试验过:可以直接退出app的使用,
<script> mui(' body').on('tap', 'a', function() { document. location.href = this.href; }); mui.init({ swipeBack: false, //关闭右滑关闭功能(默认就是false) keyEventBind: { backbutton: true //开启back按键监听( 默认就是true) } }); var quitTime = null; mui.plusReady(function(){ mui.back = function(){ //首次按键,提示“再按次退出应用’ if(!quitTime){ //记录第次按下回退键的时间 quitTime = new Date().getTime(); //回退到上一页面 window.history.go(-1); setTimeout(function(){ //1s中后清除 quitTime = null; },1000); } else{ if((new Date().getTime()-quitTime) < 1000){ plus.runtime.quit(); } } }; });
个人思考如果页面返回的自定义路由比较多,其实全局监听popstate的函数,定义全局变量进行更改~需要实践;
走坑走坑~~就找到方法解决
~~~~~~~~~~~~~~~~~~~~~·
你想成为幸福的人吗?但愿你首先学会吃得起苦。——屠格涅夫