路由重定向redirect

重定向

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

關(guān)鍵字：redirect。

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

語法：

var router = new VueRouter({
  routes:[
    // {path:'/', redirect:'跳轉(zhuǎn)到的路由地址'}
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

執(zhí)行/根目錄路由地址時，就跳轉(zhuǎn)執(zhí)行/home路由地址 ，進而把對應(yīng)的組件給顯示出來。

注意：

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

案例

在沒有任何#錨點信息的時候，顯示首頁組件。

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

vue路由重定向+路由別名

路由重定向

當(dāng)用戶訪問某個連接時，需要讓用戶自動重新訪問另一個連接，這樣的一種需求的實現(xiàn)，稱為路由重定向

如：         

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

代碼實現(xiàn)：

const routes = [
? ? {
? ? ? ? path: "/",?? ??? ??? ?// 匹配用戶訪問的請求
? ? ? ? redirect: "/main"?? ??? ?// 將用戶的請求重新定向到另一個請求
? ? },
? ? {
? ? ? ? path: "/main",?? ??? ?// 最終用戶訪問的地址
? ? ? ? copmonent: Layout
? ? }
]

路由別名（了解）

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

如：

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

代碼展示：

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

總結(jié)：

路由重定向：你輸入了a，訪問過程中瀏覽器地址自動變成了b，并且瀏覽器渲染展示了b組件

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

路由別名：你輸入了a，然后訪問到了b 

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

文字描述：

用戶通過路徑A訪問資源A，服務(wù)器讓客戶端重新定向訪問路徑B，并得到路徑B的過程，此時客戶端看到的訪問路徑是路徑B，看到的資源就是資源B，這個過程就是重定向

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

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

最新評論