關(guān)于路由重定向redirect的基本使用
路由重定向redirect
重定向
使得一個(gè)路由地址A與另一個(gè)路由地址B聯(lián)系起來,執(zhí)行A的時(shí)候會(huì)跳轉(zhuǎn)執(zhí)行B。
關(guān)鍵字:redirect。

用戶第一次訪問網(wǎng)站頁面("/根目錄"首頁)時(shí),地址欄里邊沒有“#錨點(diǎn)”的信息,也就沒有對(duì)應(yīng)的組件用于顯示,用戶體驗(yàn)不好,現(xiàn)在可以通過重定向實(shí)現(xiàn)一種效果,即當(dāng)瀏覽器沒有任何 #錨點(diǎn)信息時(shí),默認(rèn)也給顯示一個(gè)組件。
語法:
var router = new VueRouter({
routes:[
// {path:'/', redirect:'跳轉(zhuǎn)到的路由地址'}
{path:'/', redirect:'/home'},
{path:'/home', component:Home}
]
})
執(zhí)行/根目錄路由地址時(shí),就跳轉(zhuǎn)執(zhí)行/home路由地址 ,進(jìn)而把對(duì)應(yīng)的組件給顯示出來。
注意:
- 1.不僅 “/” 可以被重定向,其他普通路由地址互相也可以重定向。
- 2.重定向會(huì)使得路由再次發(fā)生調(diào)用請(qǐng)求。
案例
在沒有任何#錨點(diǎn)信息的時(shí)候,顯示首頁組件。
const router = new VueRouter({
routes:[
// {path:'路由地址A', redirect:'路由地址B'} // A 重定向執(zhí)行 B
{path:'/', redirect:'/home'},
{path:'/home', component:Home},
]
})
vue路由重定向+路由別名
路由重定向
當(dāng)用戶訪問某個(gè)連接時(shí),需要讓用戶自動(dòng)重新訪問另一個(gè)連接,這樣的一種需求的實(shí)現(xiàn),稱為路由重定向
如:
- 用戶地址欄輸入:http://localhost:8080/
- 最終地址欄顯示:http://localhost:8080/#/main
- 最終瀏覽器渲染:/main對(duì)應(yīng)的組件
代碼實(shí)現(xiàn):
const routes = [
? ? {
? ? ? ? path: "/",?? ??? ??? ?// 匹配用戶訪問的請(qǐng)求
? ? ? ? redirect: "/main"?? ??? ?// 將用戶的請(qǐng)求重新定向到另一個(gè)請(qǐng)求
? ? },
? ? {
? ? ? ? path: "/main",?? ??? ?// 最終用戶訪問的地址
? ? ? ? copmonent: Layout
? ? }
]路由別名(了解)
當(dāng)用戶發(fā)送了一個(gè)請(qǐng)求,服務(wù)器正在升級(jí),這個(gè)請(qǐng)求不對(duì)應(yīng)任何組件,但是為了不影響用戶體驗(yàn),服務(wù)器自動(dòng)將這個(gè)請(qǐng)求轉(zhuǎn)發(fā)到展示首頁的組件中
如:
- 用戶瀏覽器地址輸入:http://localhost:8080/main
- 最終瀏覽器地址顯示:http://localhost:8080/main
- 最終瀏覽器渲染的組件:/main2對(duì)應(yīng)的組件
代碼展示:
const routes = [
? ? {path: "/", redirect: "/login"}, // 當(dāng)用戶訪問 /時(shí),自動(dòng)重定向到/login,避免用戶看到空白頁面
? ? {path: "/login", component: Login},
? ? {path: "/reg", component: Register},
? ? {path: "/main2", component: Layout, alias: "/main"}, // 路由別名
? ? // {path: "/main2", component: Layout}
]總結(jié):
路由重定向:你輸入了a,訪問過程中瀏覽器地址自動(dòng)變成了b,并且瀏覽器渲染展示了b組件
{path:/"a",redirect:"/b"},
?{path:"/b",component:ComponentB}路由別名:你輸入了a,然后訪問到了b
{path:"/a",component:ComponentB,alias:"/a"} ? ? ? ??//alias別名文字描述:
用戶通過路徑A訪問資源A,服務(wù)器讓客戶端重新定向訪問路徑B,并得到路徑B的過程,此時(shí)客戶端看到的訪問路徑是路徑B,看到的資源就是資源B,這個(gè)過程就是重定向
用戶通過路徑A 訪問資源,服務(wù)器內(nèi)部將路徑A轉(zhuǎn)發(fā)到路徑B,并且得到了資源B的過程,此時(shí)客戶端看到的訪問路徑就是路徑A,看到的資源是資源B,這個(gè)過程是別名的過程
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue動(dòng)態(tài)添加行/刪除行的完整代碼示例
在開發(fā)中我們常常會(huì)碰到這種業(yè)務(wù),有一些數(shù)據(jù)需要在前端進(jìn)行刪除,這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加行/刪除行的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue3+vite+ts使用require.context問題
這篇文章主要介紹了vue3+vite+ts使用require.context問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
elementui的table列超出隱藏tooltip懸浮顯示問題
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)的相關(guān)資料,文中通過圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站
需要實(shí)現(xiàn)一個(gè)輪播圖,輪播內(nèi)容是不同的網(wǎng)站,并實(shí)現(xiàn)鼠標(biāo)滑動(dòng)時(shí)停止輪播,當(dāng)鼠標(biāo)10秒內(nèi)不動(dòng)時(shí)繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站,需要的朋友可以參考下2024-02-02
vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3+vite應(yīng)用中添加sass預(yù)處理器問題
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)
本文主要介紹了vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02

