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

Question

如果路由中包含任何道具，我正在寻找一种适当的方法来加载不同的 VueJS 组件。

例如，如果我去

/用户

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

/users/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 }})

有什么想法吗？

Answer 1

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

{
    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,
        }
    ]
}

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