温馨提示×

vue路由重定向怎么设置成动态的

vue
小亿
202
2023-08-04 16:48:01
栏目: 编程语言

在Vue路由的配置中,可以使用动态路由参数作为重定向的目标。具体的设置方法如下所示:

const routes = [
{
path: '/user/:id',
component: User,
children: [
{
// 动态重定向到用户信息页面
path: '',
redirect: to => {
return `/user/${to.params.id}/info`
}
},
{
// 用户信息页面
path: 'info',
component: UserInfo
},
{
// 用户设置页面
path: 'settings',
component: UserSettings
}
]
}
]

在上述示例中,通过动态路由参数:id来匹配用户的ID,在重定向配置中,通过to.params.id获取当前动态路由参数的值,然后将其拼接到重定向的目标路径中。

当用户访问/user/123时,会被重定向到/user/123/info页面,而不是显示空页面。

0