1.重定向
重定向通过 redirect 属性完成。
下面的例子是从 / 重定向到 /home,就表示如果路由为 / 的时候会直接跳转到 /home:
{ path: '/', name: '/', redirect: '/home' },
重定向的目标也可以是一个命名的路由:
{ path: '/home', redirect: { name: 'homepage' }
甚至是一个方法,动态返回重定向目标:
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]
也可以重定向到相对位置:
const routes = [
{
// 将总是把/users/123/posts重定向到/users/123/profile。
path: '/users/:id/posts',
redirect: to => {
// 该函数接收目标路由作为参数
// 相对位置不以`/`开头
// 或 { path: 'profile'}
return 'profile'
},
},
]
2.别名
重定向是指当用户访问 /
时,URL 会被 /home
替换,然后匹配成 /home
。
别名通过属性 alias 完成,将 /home
别名为 /
,意味着当用户访问 /
时,URL 仍然是 /
,但会被匹配为用户正在访问 /home
。
const routes = [{ path: '/home', component: Homepage, alias: '/' }]
通过别名,你可以自由地将 UI 结构映射到一个任意的 URL,而不受配置的嵌套结构的限制。使别名以 /
开头,以使嵌套路径中的路径成为绝对路径。你甚至可以将两者结合起来,用一个数组提供多个别名:
const routes = [
{
path: '/users',
component: UsersLayout,
children: [
// 为这 3 个 URL 呈现 UserList
// - /users
// - /users/list
// - /people
{ path: '', component: UserList, alias: ['/people', 'list'] },
],
},
]
如果你的路由有参数,请确保在任何绝对别名中包含它们:
const routes = [
{
path: '/users/:id',
component: UsersByIdLayout,
children: [
// 为这 3 个 URL 呈现 UserDetails
// - /users/24
// - /users/24/profile
// - /24
{ path: 'profile', component: UserDetails, alias: ['/:id', ''] },
],
},
]