vue 开发App监听手机返回键返回上级路由以及退出

最新推荐文章于 2024-07-08 13:45:00 发布

前端小李

最新推荐文章于 2024-07-08 13:45:00 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端开发 vue 全栈工程师文章标签： vue a'p'p we'b

本文链接：https://blog.youkuaiyun.com/qq_43287934/article/details/87658583

前端开发同时被 3 个专栏收录

54 篇文章

订阅专栏

全栈工程师

30 篇文章

订阅专栏

vue

26 篇文章

订阅专栏

本文介绍如何使用Vue和vue-awesome-mui插件监听手机物理返回键，实现返回上级路由及退出应用的功能。通过注册插件并设置监听，可以有效控制应用的导航行为。

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

vue 开发App监听手机返回键返回上级路由以及退出

一、mui进行手机物理键的监听

首先安装 vue-awesome-mui
npm i vue-awesome-mui

二、在main.js注册vue-awesome-mui

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

三、在index.html中监听手机返回键

 <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();
}
}
};
});


  </script>