1. 程式人生 > >vue-router 在微信瀏覽器中操作history URl未改變的解決方案

vue-router 在微信瀏覽器中操作history URl未改變的解決方案

問題描述:

在PC端和手機瀏覽器中router.replace() or router.push()能夠正常使用,頁面的地址和頁面都正常顯示;但是在微信中,從/a頁面通過router.push('/b')跳轉到/b頁面後,頁面正常,但是複製瀏覽器的地址會發現其地址仍為/a;選擇在瀏覽器打開發現也是顯示的/a的頁面。 這應該是微信瀏覽器那邊的問題,微信瀏覽器只會記住你第一次進來的地址。

微信瀏覽器不會自動新增 # 在pc端或者手機瀏覽器開發的時候 輸入localhost:8080,瀏覽器會自動跳轉到localhost:8080/#/,但是在微信瀏覽器中,雖然頁面顯示正常了,但是我們通過微信右上角的選項複製當前的地址,會發現地址為仍然localhost:8080,這後面導致了其他的 router.push()操作都無法修改微信瀏覽器的url;當然,如果我們在程式中alert(location.href)是正常的。

解決方案 在進入頁面的時候我們預設的給url加上#,即localhost:8080/#/,再次測試後發現 安卓 中微信瀏覽器的url和我們專案中的url相對應了。

iOS中微信瀏覽器url仍然不對應 處理完上面的問題後測試安卓機正常了,但是iOS機型微信中在/b頁面複製地址中仍然/a頁面,檢視資料網上很多人都說可以通過連結的方式處理。

1.用history的時候,把router-link換成a標籤跳轉,

我的處理方式是點選跳轉後直接使用window.location.herf = 'localhost:8080/#/b'的方式,即直接拼接好跳轉的後路由地址。暫時解決了這個問題 因為我在專案中測試只有ios在微信中出現這個問題,所以只針對ios在微信中特殊處理。其他情況下還是通過hash路由正常處理。

另外參考:H5 history.pushState 在微信內修改url後點擊用safari開啟/複製連結是修改之前的頁面 ---------------------  作者:xiao_liang5  來源:CSDN  原文:https://blog.csdn.net/helloxiaoliang/article/details/83059385  版權宣告:本文為博主原創文章,轉載請附上博文連結!