vue - history模式下 - 微信瀏覽器中頁面跳轉url路徑不變問題

場景:

移動端web項目,使用vue中的 $router.push() 和 $router.replace() 做路由跳轉時,微信瀏覽器中頁面跳轉正常,但通過微信瀏覽器複製鏈接,得到的卻始終是最初剛進入頁面時的地址。經測試發現,hash模式下地址顯示正常,只有history模式下存在此問題。比如:
在微信瀏覽器中,項目的首頁地址爲localhost:8080/home, 當我通過 $router.push(’/list’) 跳轉到列表頁後,通過微信瀏覽器的複製鏈接,得到的仍然是localhost:8080/home。

問題原因:

微信瀏覽器對history模式支持不太友好導致, 它只會記住你第一次進來的地址。

解決方法:

在created鉤子函數裏給路由添加特殊標識:

created() {
	let _href = window.location.href // 獲取當前地址
	if(_href.indexOf('&replace=1') <= -1){ // 若沒有replace參數,則添加進去
	  window.location.replace(_href+'&replace=1')
	}
}

再次測試~url跳轉地址正常。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章