vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯的完美解決
在路由配置中,設(shè)置重定向后,瀏覽器打開是空白沒有內(nèi)容,這里首先確保你的結(jié)構(gòu)沒有寫錯,然后查看單詞是否拼錯誤,一般情況是因?yàn)閱卧~拼寫錯誤。
修改后,跳轉(zhuǎn)成功:
附錄:VUE通過后端重定向到VUE的頁面后,前端路由失效的解決方案
這個問題是我在做微信授權(quán)登錄的時候遇到的。
具體描述:
用戶打開頁面后,路由攔截判斷用戶是否登錄,如果未登錄,則將用戶的訪問地址記錄到localStorage里面,等待授權(quán)后重定向到該頁面。
當(dāng)我使用location.href將頁面跳轉(zhuǎn)到后端地址,進(jìn)行微信用戶信息獲取完成,由php后端通過header將頁面重定向到我http://my.app.com/#/login 頁面時,發(fā)現(xiàn)似乎并沒有路由到login頁面,而是卡在了 #/ 默認(rèn)路由。在微信瀏覽器中將頁面地址復(fù)制出來,發(fā)現(xiàn)確實(shí)是丟失了#后面的部分。
經(jīng)過一系列的思考,懷疑是瀏覽器緩存的原因,php后端通過header()
函數(shù)跳轉(zhuǎn)時,加上隨機(jī)數(shù)字,防止瀏覽器使用緩存。即:
header("Location:http://my.app.com/?".time()."#/login"),
在url中加上時間戳,防止瀏覽器使用緩存是一種很常見的做法。
這個問題的原因我猜想可能是一開始瀏覽器訪問了http://my.app.com/。而之后重定向的http://my.app.com/#/login只是多了#號后的部分,傳統(tǒng)頁面中#被作為錨點(diǎn)使用,所以瀏覽器認(rèn)為你訪問了2個一模一樣的頁面,所以使用了緩存。
這個問題并不是在所有手機(jī)上都有的,部分手機(jī)才會出現(xiàn)這個問題,不過加上隨機(jī)數(shù)之后,問題完美解決!
到此這篇關(guān)于vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯的完美解決的文章就介紹到這了,更多相關(guān)vue重定向redirect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件詳解
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11require.js 加載 vue組件 r.js 合并壓縮的實(shí)例
這篇文章主要介紹了require.js 加載 vue組件 r.js 合并壓縮的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-10-10element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))
開發(fā)中有時候需要input只能輸入數(shù)字,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu),el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過濾功能,需要的朋友可以參考下2022-04-04