Vue H5安卓的返回鍵解決方案
阿新 • • 發佈：2018-12-01
使用Vue和H5做安卓手機端時候，安卓的實體返回鍵會返回上一個路由頁面，導致頁面出現各種問題。
在網上苦苦尋找了各種方法，都不能完美解決，最終採用下面這種方法，已經完美解決。
一、路由跳轉改寫
1、this.$router.push()全部改寫為this.$router.replace() 2、<router-link to="/">全部改寫為<router-link to="/" replace> 因為this.$router.push會在window.histroy中保留瀏覽器的歷史記錄。 這樣返回鍵會返回上一個路由，而this.$router.replace不會在history中保留。二、子頁面返回改寫
以聊天介面為例：
1、訊息列表頁面
每條訊息的點選事件使用this.$router.push()，點選進入詳情頁，這樣保證histroy中記錄著主頁面的地址。
2、詳情頁面
左上角有個返回按鈕，這個返回按鈕的跳轉事件千萬不能用this.$router來跳轉，否則會出現返回錯亂。
而是使用window.history.back()，這樣既能成功返回上一頁，也會清除掉上一條history記錄。
如果還有什麼特殊情況，或者有更深層級的子頁面，請參照上面這個思路來處理。
----------------------------------------------------------------------------------------------------------
