快捷導(dǎo)航

關(guān)于路由重定向redirect的基本使用

更新時(shí)間：2022年08月16日 10:35:02 作者：木藍(lán)茶陌*_*

這篇文章主要介紹了關(guān)于路由重定向redirect的基本使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

路由重定向redirect

重定向

使得一個(gè)路由地址A與另一個(gè)路由地址B聯(lián)系起來(lái)，執(zhí)行A的時(shí)候會(huì)跳轉(zhuǎn)執(zhí)行B。

關(guān)鍵字：redirect。

用戶(hù)第一次訪(fǎng)問(wèn)網(wǎng)站頁(yè)面("/根目錄"首頁(yè))時(shí)，地址欄里邊沒(méi)有“#錨點(diǎn)”的信息，也就沒(méi)有對(duì)應(yīng)的組件用于顯示，用戶(hù)體驗(yàn)不好，現(xiàn)在可以通過(guò)重定向實(shí)現(xiàn)一種效果，即當(dāng)瀏覽器沒(méi)有任何 #錨點(diǎn)信息時(shí)，默認(rèn)也給顯示一個(gè)組件。

語(yǔ)法：

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)的組件給顯示出來(lái)。

注意：

1.不僅 “/” 可以被重定向，其他普通路由地址互相也可以重定向。
2.重定向會(huì)使得路由再次發(fā)生調(diào)用請(qǐng)求。

案例

在沒(méi)有任何#錨點(diǎn)信息的時(shí)候，顯示首頁(yè)組件。

const router = new VueRouter({
  routes:[
    // {path:'路由地址A', redirect:'路由地址B'}  // A 重定向執(zhí)行 B
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home},
  ]
})

vue路由重定向+路由別名

路由重定向

當(dāng)用戶(hù)訪(fǎng)問(wèn)某個(gè)連接時(shí)，需要讓用戶(hù)自動(dòng)重新訪(fǎng)問(wèn)另一個(gè)連接，這樣的一種需求的實(shí)現(xiàn)，稱(chēng)為路由重定向

如：

用戶(hù)地址欄輸入：http://localhost:8080/
最終地址欄顯示：http://localhost:8080/#/main
最終瀏覽器渲染：/main對(duì)應(yīng)的組件

代碼實(shí)現(xiàn)：

const routes = [
? ? {
? ? ? ? path: "/",?? ??? ??? ?// 匹配用戶(hù)訪(fǎng)問(wèn)的請(qǐng)求
? ? ? ? redirect: "/main"?? ??? ?// 將用戶(hù)的請(qǐng)求重新定向到另一個(gè)請(qǐng)求
? ? },
? ? {
? ? ? ? path: "/main",?? ??? ?// 最終用戶(hù)訪(fǎng)問(wèn)的地址
? ? ? ? copmonent: Layout
? ? }
]

路由別名（了解）

當(dāng)用戶(hù)發(fā)送了一個(gè)請(qǐng)求，服務(wù)器正在升級(jí)，這個(gè)請(qǐng)求不對(duì)應(yīng)任何組件，但是為了不影響用戶(hù)體驗(yàn)，服務(wù)器自動(dòng)將這個(gè)請(qǐng)求轉(zhuǎn)發(fā)到展示首頁(yè)的組件中

如：

用戶(hù)瀏覽器地址輸入：http://localhost:8080/main
最終瀏覽器地址顯示：http://localhost:8080/main
最終瀏覽器渲染的組件：/main2對(duì)應(yīng)的組件

代碼展示：

const routes = [
? ? {path: "/", redirect: "/login"}, // 當(dāng)用戶(hù)訪(fǎng)問(wèn) /時(shí)，自動(dòng)重定向到/login，避免用戶(hù)看到空白頁(yè)面
? ? {path: "/login", component: Login},
? ? {path: "/reg", component: Register},
? ? {path: "/main2", component: Layout, alias: "/main"}, // 路由別名
? ? // {path: "/main2", component: Layout}
]

總結(jié)：

路由重定向：你輸入了a，訪(fǎng)問(wèn)過(guò)程中瀏覽器地址自動(dòng)變成了b，并且瀏覽器渲染展示了b組件

{path:/"a",redirect:"/b"},
?{path:"/b",component:ComponentB}

路由別名：你輸入了a，然后訪(fǎng)問(wèn)到了b

{path:"/a",component:ComponentB,alias:"/a"} ? ? ? ??//alias別名

文字描述：

用戶(hù)通過(guò)路徑A訪(fǎng)問(wèn)資源A，服務(wù)器讓客戶(hù)端重新定向訪(fǎng)問(wèn)路徑B，并得到路徑B的過(guò)程，此時(shí)客戶(hù)端看到的訪(fǎng)問(wèn)路徑是路徑B，看到的資源就是資源B，這個(gè)過(guò)程就是重定向

用戶(hù)通過(guò)路徑A 訪(fǎng)問(wèn)資源，服務(wù)器內(nèi)部將路徑A轉(zhuǎn)發(fā)到路徑B，并且得到了資源B的過(guò)程，此時(shí)客戶(hù)端看到的訪(fǎng)問(wèn)路徑就是路徑A，看到的資源是資源B，這個(gè)過(guò)程是別名的過(guò)程

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: