mui+vue实现webapp的手机物理键监听

    有人反映本博文写得有点模糊，我就修改一下，详细点说明本功能的实现。可能还有会有表达不清楚的地方，有问题的朋友可以提出，如果实现会出现bug也请提出。本人菜鸟一枚，轻喷！！

    由于项目需求，vue前端技术打包做成的app必须对手机的返回键需要进行监听。在网上大量查询资料然后自己拼凑成了相对于我的项目可行的方法，希望能帮到遇到同样问题的网友们。

    本项目是用vue的手脚架搭建的项目，至于怎么搭建和vue怎么使用的，不会的可以搜索下其他的博客，资料还是挺多的。个人推荐可以查看下博客 https://blog.csdn.net/FungLeo/article/details/71557042

    项目搭建出来后文件大概是如下图所示：

    

    本人用的是mui进行手机物理键的监听。首先在vue项目中安装好mui框架。

    具体的手脚架安装mui方法查看官方介绍

    在vue的主要配置文件main.js中添加mui

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

    然后再vue项目的项目入口文件index.html文件下面添加监听。

<script type="text/javascript">
mui.init({
keyEventBind: {
backbutton: true //关闭back按键监听
}
});
</script>

    到这里会出现两种情况，一种是做出来的app每个页面按下返回键的效果不一样和每个页面按下的效果一样的问题。

    我先说第一种情况，每个页面按下返回键的操作都是一样的时候，你只需要在项目入口文件index.html下面重写返回监听的方法。

mui.back = function(){
//函数体
};

    另外一种情况是每个页面的返回效果都不一样。我这个项目是每个页面按下返回键的操作都有些出入，我需要在每个页面中重写返回的方法，然后在有需要监听的vue页面中进行按下返回键的相对应操作。

mounted(){
mui.back = function(){
    /*函数体*/
};
}

    如果是这种情况，记得每个页面的返回都要写入，如果跳转到另外一个页面的时候是没有覆盖这个方法的时候，会按照上一个覆盖监听返回键的方法执行，有可能会报错或者达不到你自己想要的效果。

    另外提醒一下，如果在返回键监听的函数体里面用到data里面的数据，需要先保存当前的this对象。

data(){
    return{
        username:'',
    }
},

函数：

mounted(){
var self=this;
mui.back = function(){
self.username=“**”
/*函数体*/
};
}