Vue：直接重定向到孩子，而父母有一个参数

Question

我正在学习 Vue（在 TS 上），到目前为止它看起来很棒。目前我正在学习 Vue 路由，并且有一个问题我很难找到一个漂亮的答案。

假设我有一个名为 User 的父路由，它将 userId 作为参数。我也有这条路线的子页面，分别称为 Profile 和 Settings，并在 User 的 children 数组中设置：

routes: [
      {
            component: User,
            name: 'User'
            path: '/user/:userId',
            children: [
                {
                    component: Profile,
                    name: 'Profile',
                    path: 'profile',
                },
                {
                    component: Settings,
                    path: 'settings',
                    name: 'Settings'
                },
            ],
        }
  ]

很酷，我可以从用户组件重定向到配置文件或设置，就像

一样简单

public redirectToProfile() {
    this.$router.push({ name: 'Profile'});
}

但我的问题是 - 我可以以相同的方式从用户组件的 outside 重定向到用户的个人资料，而无需像

那样连接路径字符串

public redirectToProfile() {
    this.$router.push({ path: 'user/' + userId + '/profile'});
}

?

Answer 1

我认为您也可以通过传递参数来简单地做到这一点：

public redirectToProfile(id: string) {
   this.$router.push({ name: 'Profile', params: {userId:id}});
}