開發背景:
.net混合開發的vue模板語法的單頁面應用,所以不存在腳手架以及沒有路由可以跳轉。
項目描述:
需要寫兩個頁面,在訂單詳情頁需要點擊“請輸入手機號”進入手機號綁定頁面,手機號綁定成功后自動跳轉到訂單詳情頁,如果該手機號已經綁定成功,則不顯示“請輸入手機號”(即不可點擊進入下一個頁面),只顯示該手機號。
項目思路:
在單頁面中使用v-show控制兩個頁面的切換,所以需要模擬真實兩個頁面的跳轉,即改變hash值並且監聽歷史條目變化。
一、監聽並且覆蓋微信的回退事件
當兩個頁面在同一路由下,從“手機號綁定”頁面點擊微信的返回時不會進入“確認訂單”頁面,會直接返回,所以通過在url尾部添加可以識別的hash值並且使用方法進行監聽,以此判斷回到哪個頁面。
知識點儲備:
關於window.onpopstate事件其實是popstate事件在 window對象上的事件處理程序。每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發.
因為給url加上了hash值雖然不會重新發出http請求但是會改變瀏覽器的訪問歷史。所以即使進入了“手機號綁定”頁面,popstate也能監聽到。
因為給url加上了hash值雖然不會重新發出http請求但是會改變瀏覽器的訪問歷史。所以即使進入了“手機號綁定”頁面,popstate也能監聽到。
