vue項目中利用popstate處理頁面返回操作


需求背景:項目中需要做一個返回確認,避免用戶誤觸返回鍵而退出當前頁面。

原理:利用history和瀏覽器刷新popstate狀態

實現:

1、在mounted() 階段判斷並添加popstate事件監聽,History.pushState()(參數:一個狀態對象,一個標題(現在被忽略了),以及一個可選的URL地址), 注意:IOS版的微信,是會立即觸發popstate事件,所以需要pageshow做下處理,(當一條會話歷史記錄被執行的時候將會觸發頁面顯示(pageshow)事件。(這包括了后退/前進按鈕操作,同時也會在onload 事件觸發后初始化頁面時觸發))

 

2、在methods里定義監聽操作函數

 

3、頁面銷毀時,取消監聽。(注意:一定要取消監聽,否則其他vue路由頁面也會被監聽)

 


免責聲明!

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



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