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

Question

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

例如，如果我去

/users

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

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

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

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

How to load different component if route has params using VueJS Router

vue.js

vue-router

vue-component

vuejs2