重定向
重定向也是通過 routes
配置來完成,下面例子是從 /a
重定向到 /b
:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目標也可以是一個命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一個方法可都,動態(tài)返回重定向目標:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目標路由 作為參數(shù)
// return 重定向的 字符串路徑/路徑對象
}}
]
})
注意導航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上,而僅僅應(yīng)用在其目標上惊搏。在下面這個例子中摹量,為 /a
路由添加一個 beforeEach
或 beforeLeave
守衛(wèi)并不會有任何效果勃痴。
其它高級用法飒房,請參考例子誉尖。
別名
“重定向”的意思是,當用戶訪問 /a
時劣领,URL 將會被替換成 /b
蚕脏,然后匹配路由為 /b
侦副,那么“別名”又是什么呢驼鞭?
/a
的別名是 /b
秦驯,意味著,當用戶訪問 /b
時挣棕,URL 會保持為 /b
译隘,但是路由匹配則為 /a
亲桥,就像用戶訪問 /a
一樣。
上面對應(yīng)的路由配置為:
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
“別名”的功能讓你可以自由地將 UI 結(jié)構(gòu)映射到任意的 URL固耘,而不是受限于配置的嵌套路由結(jié)構(gòu)题篷。