使用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來跳轉,否則會出現返回錯亂。
而是使用this.$router.back() 或者 this.$router.go(-1),這樣既能成功返回上一頁,也會清除掉上一條history記錄。
如果需要帶狀態或者參數返回上一頁,我目前的方法是將子頁面寫成彈窗形式,懸浮在最頂層頁面。
如果還有什么特殊情況,或者有更深層級的子頁面,請參照上面這個思路來處理。
反正這個問題很蛋疼,沒有找到特別好的辦法。
如果有大佬有更好的方法,請在下面評論,謝謝!