1. 程式人生 > 程式設計 >vue中重定向redirect:‘/index‘,不顯示問題、跳轉出錯的完美解決

vue中重定向redirect:‘/index‘,不顯示問題、跳轉出錯的完美解決

在路由配置中,設定重定向後,瀏覽器開啟是空白沒有內容,這裡首先確保你的結構沒有寫錯,然後檢視單詞是否拼錯誤,一般情況是因為單詞拼寫錯誤。

vue中重定向redirect:‘/index‘,不顯示問題、跳轉出錯的完美解決

vue中重定向redirect:‘/index‘,不顯示問題、跳轉出錯的完美解決

修改後,跳轉成功:

vue中重定向redirect:‘/index‘,不顯示問題、跳轉出錯的完美解決

附錄:VUE通過後端重定向到VUE的頁面後,前端路由失效的解決方案

這個問題是我在做微信授權登入的時候遇到的。

具體描述:

使用者開啟頁面後,路由攔截判斷使用者是否登入,如果未登入,則將使用者的訪問地址記錄到localStorage裡面,等待授權後重定向到該頁面。

當我使用location.href將頁面跳轉到後端地址,進行微信使用者資訊獲取完成,由php後端通過header將頁面重定向到我http://my.app.com/#/login 頁面時,發現似乎並沒有路由到login頁面,而是卡在了 #/ 預設路由。在微信瀏覽器中將頁面地址複製出來,發現確實是丟失了#後面的部分。

經過一系列的思考,懷疑是瀏覽器快取的原因,php後端通過header()函式跳轉時,加上隨機數字,防止瀏覽器使用快取。即:

header("Location:http://my.app.com/?".time()."#/login"),在url中加上時間戳,防止瀏覽器使用快取是一種很常見的做法。

這個問題的原因我猜想可能是一開始瀏覽器訪問了http://my.app.com/。而之後重定向的http://my.app.com/#/login只是多了#號後的部分,傳統頁面中#被作為錨點使用,所以瀏覽器認為你訪問了2個一模一樣的頁面,所以使用了快取。

這個問題並不是在所有手機上都有的,部分手機才會出現這個問題,不過加上隨機數之後,問題完美解決!

到此這篇關於vue中重定向redirect:‘/index‘,不顯示問題、跳轉出錯的完美解決的文章就介紹到這了,更多相關vue重定向redirect內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!