Vue H5安卓的返回鍵解決方案


使用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記錄。

如果需要帶狀態或者參數返回上一頁,我目前的方法是將子頁面寫成彈窗形式,懸浮在最頂層頁面。

 

如果還有什么特殊情況,或者有更深層級的子頁面,請參照上面這個思路來處理。

反正這個問題很蛋疼,沒有找到特別好的辦法。

如果有大佬有更好的方法,請在下面評論,謝謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM