vue移动端更改手机物理按键返回问题

时间:2023-03-08 18:49:15

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

今天记录下应用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'})//返回键要返回的路由
}
}

  优点:监控了页面其他路由的点击事件,这样在返回到指定的页面中肯定是无问题的,排除了其他路由的影响~给个赞