有人反映本博文寫得有點模糊，我就修改一下，詳細點說明本功能的實現。可能還有會有表達不清楚的地方，有問題的朋友可以提出，如果實現會出現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=“**”
/*函式體*/
};
}