又是一天見面的日子，春季盎然~ 已經無法在繼續抒情下去了，寫作水平驟降！！
今天記錄下應用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的函數，定義全局變量進行更改~需要實踐；
走坑走坑~~就找到方法解決
~~~~~~~~~~~~~~~~~~~~~·
你想成為幸福的人嗎？但願你首先學會吃得起苦。——屠格涅夫