【 vue 】vue项目打包成app按物理返回键直接退出、同时如果存在弹窗的解决方法

我们将vue项目打包成app后，当按下物理返回键时，会直接退出app。这当然是不可取的，正确应该是在大路由页面单击提示，双击退出。而在子页面按下返回键会回退上一页，如果存在弹窗会先关闭而不返回，再次点击时返回。解决方法如下。

1.安装mui
使用mui框架，mui框架将窗口关闭功能封装在mui.back方法中

npm install vue-awesome-mui

2.在main.js中引入

import Mui from 'vue-awesome-mui';
Vue.use(Mui);

3.在index.js写逻辑
首先添加全局前置守卫

router.beforeEach((to, from, next) => {
      //后面代码写在这里
		next()  
	})

先考虑大路由页面按下返回键，第一次按会出现提示，第二次退出

        var quit = false  //false为单击，true为连续按两次
		mui.back = function(){  //按下物理返回键
			if(!quit){ //首次按下
			   mui.toast("再按一次退出应用") //提示
			   quit = true				
			   setTimeout(function(){  //2s内没有连续点击则恢复初始
					quit = false
				},2000)
			}else{  //连续按下
				 plus.runtime.quit(); //退出app
			}	 
		}

然后考虑如果在子页面点击返回，不出现提示，只退回上一页，添加一个if条件

    //home和about为项目中的两个大路由
    //如果是在这两个大路由中按下的
    if(to.name == 'home' || to.name == 'about')
	{
		mui.toast("再按一次退出应用")
		quit = true				
		setTimeout(function(){
			quit = false
		},2000)
	}else{
	    history.go(-1); // 返回上一页
	}

接下来考虑如果子页面中存在弹窗（这里不考虑大路由存在弹窗），那么需要点击关闭弹窗而不返回，再次点击时返回，在else语句添加条件。

//showmask为子页面中data里面的数据,true代表存在弹窗，false为不存在
if(to.matched[0].instances.default.showmask){
		to.matched[0].instances.default.showmask = false
}else{
	   history.go(-1); // 返回上一页
}

4.完整代码

router.beforeEach((to, from, next) => {
	var quit = false
	mui.back = function(){  //按下物理返回键
	   if(!quit){
			if(to.name == 'home' || to.name == 'about')
			{
				mui.toast("再按一次退出应用")
				quit = true				
				setTimeout(function(){
					quit = false
				},2000)
			}else{
				if(to.matched[0].instances.default.showmask){
					to.matched[0].instances.default.showmask = false
				}else{
					history.go(-1); // 返回上一页
				}
			}
		}else{
			 plus.runtime.quit(); //退出app
		}	 
	}
	next()  
	})