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

Question

I'm looking for a proper way to load a different VueJS component if there are any props included in a route.

For example, if I go to

/users

I get the users list page and if I'd go to

/users/1

I would go to user profile page.

I've been trying to add another route as a child with parameters but it wouldn't seem to help:

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

I am pushing the user profile route from a method like this:

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

Any ideas?

Harshal Patil · Accepted Answer · 2018-08-21 09:03:51Z

2

It is simple. This is what you need to do:

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

Here routes will be concatenated to form final routes.

answered Aug 21, 2018 at 9:03

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

butaminas Over a year ago

Thanks, this works, but the URL when accessing user-profile route is getting changed from /users to /?userId=9 and I'm looking to keep the /users. Any way to achieve that?

Harshal Patil Over a year ago

@butaminas, you are using query params in your routing like this: query: { userId: row.id }. Don't do that. Use: this.$router.push({ path: 'users', name: 'User Profile', params: { userId: row.id }}. You should use params and not query.

butaminas Over a year ago

Thanks! This was the main problem! Also, just so I wouldn't need to use a parent component, I moved user-profile route out of the child and changed the path to users/:userID to achieve same result.

Harshal Patil Over a year ago

@butaminas, While it will work, but you should use it when you want to activate both the views at the same time. With your routing configuration, both UserList, as well as UserProfile components, will be active. That is the impression it creates. Of course, there are ways. But is that what you really need? Prefer clean routing structure. It helps in a long run.

butaminas Over a year ago

in this particular case, user-profile route is used as an alternative to a modal. After you finish editing a user, you get back to the user-list route and there is no other ways to reach the user-profile route other then going to user-list route first. I do agree though that it makes more sense to have user-profile route as a child route in a long run, but if it's a very small app, creating a parent component is as unclean as having an extra route. Will experiment both cases though. Thanks!

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related