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