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記錄。
如果還有什麼特殊情況,或者有更深層級的子頁面,請參照上面這個思路來處理。
----------------------------------------------------------------------------------------------------------