場景:
移動端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跳轉地址正常。