路由重定向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è)參考，也希望大家多多支持腳本之家。 

最新評(píng)論