vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯(cuò)的完美解決
在路由配置中，設(shè)置重定向后，瀏覽器打開是空白沒有內(nèi)容，這里首先確保你的結(jié)構(gòu)沒有寫錯(cuò)，然后查看單詞是否拼錯(cuò)誤，一般情況是因?yàn)閱卧~拼寫錯(cuò)誤。
修改后，跳轉(zhuǎn)成功：
附錄：VUE通過后端重定向到VUE的頁(yè)面后，前端路由失效的解決方案
這個(gè)問題是我在做微信授權(quán)登錄的時(shí)候遇到的。
具體描述：
用戶打開頁(yè)面后，路由攔截判斷用戶是否登錄，如果未登錄，則將用戶的訪問地址記錄到localStorage里面，等待授權(quán)后重定向到該頁(yè)面。
當(dāng)我使用location.href將頁(yè)面跳轉(zhuǎn)到后端地址，進(jìn)行微信用戶信息獲取完成，由php后端通過header將頁(yè)面重定向到我http://my.app.com/#/login 頁(yè)面時(shí)，發(fā)現(xiàn)似乎并沒有路由到login頁(yè)面，而是卡在了 #/ 默認(rèn)路由。在微信瀏覽器中將頁(yè)面地址復(fù)制出來，發(fā)現(xiàn)確實(shí)是丟失了#后面的部分。
經(jīng)過一系列的思考，懷疑是瀏覽器緩存的原因，php后端通過header()函數(shù)跳轉(zhuǎn)時(shí)，加上隨機(jī)數(shù)字，防止瀏覽器使用緩存。即：
header("Location:http://my.app.com/?".time()."#/login")，在url中加上時(shí)間戳，防止瀏覽器使用緩存是一種很常見的做法。
這個(gè)問題的原因我猜想可能是一開始瀏覽器訪問了http://my.app.com/。而之后重定向的http://my.app.com/#/login只是多了#號(hào)后的部分，傳統(tǒng)頁(yè)面中#被作為錨點(diǎn)使用，所以瀏覽器認(rèn)為你訪問了2個(gè)一模一樣的頁(yè)面，所以使用了緩存。
這個(gè)問題并不是在所有手機(jī)上都有的，部分手機(jī)才會(huì)出現(xiàn)這個(gè)問題，不過加上隨機(jī)數(shù)之后，問題完美解決！
到此這篇關(guān)于vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯(cuò)的完美解決的文章就介紹到這了,更多相關(guān)vue重定向redirect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue左右滑動(dòng)選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
一次VUE項(xiàng)目中遇到XSS攻擊的實(shí)戰(zhàn)記錄
XSS?攻擊是頁(yè)面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項(xiàng)目中遇到XSS攻擊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式
這篇文章主要介紹了Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目調(diào)試的三種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項(xiàng)目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
axios+vue請(qǐng)求時(shí)攜帶cookie的方法實(shí)例
做項(xiàng)目時(shí)遇到一個(gè)需求,后端需要在接口請(qǐng)求時(shí),對(duì)用戶登陸狀態(tài)進(jìn)行判斷,需要在請(qǐng)求時(shí)攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請(qǐng)求時(shí)攜帶cookie的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)拖拽或點(diǎn)擊上傳圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽或點(diǎn)擊上傳圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式
這篇文章主要介紹了uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
本篇文章給大家詳細(xì)介紹了vue跨域處理問題的方式以及相關(guān)知識(shí)點(diǎn)介紹，對(duì)此有興趣的朋友學(xué)習(xí)下。2018-02-02