Vue.js 如果路由具有参数，如何使用VueJS路由器加载不同的组件

如果路线中包含任何道具，我正在寻找加载不同VueJS组件的正确方法

例如，如果我去

/使用者

我得到了用户列表页面，如果我想

/用户/1

我会转到用户配置文件页面

作为一个带有参数的孩子，我一直在尝试添加另一条路线，但似乎没有帮助：

{
            path: "users",
            name: "users",
            component: UsersList,
            children: [
                {
                    path: "users/:userId",
                    name: "User Profile",
                    component: UserProfile,
                },
            ]
},

我使用如下方法推送用户配置文件路由：

this.$router.push({ path: 'users', name: 'User Profile', query: { userId: row.id }})

---

有什么想法吗？

很简单。这是您需要做的：

{
    path: "users",
    name: "users",
    // IMPORTANT - UserParent contains `<router-view></router-view>`
    component: UserParent,
    children: [
        {
            // IMPORTANT - NEEDS TO BE BLANK
            path: "",
            name: "user-list",
            component: UserList,
        },

        {
            path: ":userId",
            name: "user-profile",
            component: UserProfile,
        }
    ]
}

{
路径：“用户”，
名称：“用户”，
//重要信息-UserParent包含``
组件：UserParent，
儿童：[
{
//重要信息-需要为空
路径：“”，
名称：“用户列表”，
组件：UserList，
},
{
路径：“：userId”，
名称：“用户配置文件”，
组件：UserProfile，
}
]
}

---

这里的路由将被连接起来形成最终路由。

谢谢，这是可行的，但是访问用户配置文件路由时的URL将从

/users

更改为

/？userId=9

，我希望保留

/users

。有没有办法做到这一点？@butaminas，您在路由中使用的查询参数如下：

query:{userId:row.id}

。不要那样做。使用：

this.$router.push（{path:'users'，name:'User Profile'，params:{userId:row.id}}

。你应该使用

params

而不是

query

。谢谢！这是主要问题！而且，为了不需要使用父组件，我将

user profile

路由移出子组件，并将路径更改为

users/：userID

，以获得相同的结果。@butaminas，虽然它可以工作，但你应该使用它当您想同时激活两个视图时。通过路由配置，UserList和UserProfile组件都将处于活动状态。这就是它给人的印象。当然，有很多方法。但这就是您真正需要的吗？首选干净的路由结构。从长远来看，这会有所帮助。在这种情况下，

user profile

路线用作模式的替代。编辑完用户后，您返回到

用户列表

路线，除了先进入

用户列表

路线之外，没有其他方法可以到达

用户配置文件

路线。我同意，拥有

用户配置文件

路线更有意义从长远来看，这是一个子路由，但如果它是一个非常小的应用程序，那么创建父组件就像创建一个额外的路由一样不干净。不过，我们将尝试这两种情况。谢谢！