如果路由使用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,
        }
    ]
}

此处的路线将被合并以形成最终路线。