vue移动端更改手机物理按键返回问题-优快云博客

本文介绍了解决Cordova+Vue应用中手机物理返回键导致的返回路径不一致问题的方法。通过三种不同的实现方式，包括路由钩子、监听popstate事件及全局定义，详细阐述了每种方案的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

今天记录下应用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的函数，定义全局变量进行更改~需要实践；

走坑走坑~~就找到方法解决

~~~~~~~~~~~~~~~~~~~~~·

你想成为幸福的人吗？但愿你首先学会吃得起苦。——屠格涅夫

转载于:https://www.cnblogs.com/mfyngu/p/10582538.html