在vue項目中使用vue-router做路由,做到返回頁面的邏輯時,由於window.history.back滿足不了返回的需要,故想通過
window.addEventListener('popstate', function(event) {}) 解決,無耐該事件執行的次數不固定,不知什么原因,反正沒找出來。
頁面的跳轉邏輯是,首頁跳A頁面,然后A頁面觸發事件跳轉到B頁面,B頁面提交后再跳到A頁面,這時候你點擊返回按鈕的時候返回的路徑依次是:A->B->A->首頁,而想要的效果是在最后B跳A的這個頁面中,點擊返回按鈕跳到首頁。
假設首頁的路徑為'/index',A頁面的路徑為'/coupon',B頁面的路徑為'/couponAdd',實現如下:
一開始是想在beforeRouteLeave中做判斷,,這樣判斷出現問題了,如果一開始從A頁面跳轉到B頁面的話,from.fullPath=='/coupon'&&to.fullPath=='/couponAdd' 為true,也就是它也會跳轉到首頁,不會跳轉到B頁面。然后我又想到了另外下個函數,route的beforeRouteEnter,然后在data中添加一個屬性,用來做判斷,
,無耐它不能獲取組件實例,再想。
經過再次思考我決定用sessionStorage存儲數據,代碼如下:
backFlag就是用來判斷是否是從B跳轉到A,如果是就把它置為true,然后在beforeRouteLeave時再判斷根據該值跳轉,如果它為false,說明是從A跳轉到B,就跳轉唄,若為true的話,說明它是從B跳轉到A,然后再點擊的返回,此時this.$router.push({path:'/index'});直接跳轉到首頁,問題解決。