Vue-router: when to use children routes? Complex apps

I’ve read the Nested Routes page in the doc but the example is kind of simple.

Let’s take the same idea of users and add a few endpoints:

  • /users = List of users
  • /users/:id = Profile of a user
  • /users/:id/friends = List of friends of a user

In this case, how would you declare your routes?
I’ve thought about 2 ways.

  1. Separate the list of users & the user details

    [
    { path: ‘/users’, components: UsersList },
    {
    path: ‘/users/:id’, component: User,
    children: [
    { path: ‘’, component: UserProfile },
    { path: ‘/friends’, component: UserFriends },
    ]
    }
    ]

  2. Nest the user details

    [
    {
    path: ‘/users’,
    components: Users,
    children: [
    { path: ‘’, component: UsersList },
    {
    path: ‘/:id’, component: User,
    children: [
    { path: ‘’, component: UserProfile },
    { path: ‘/friends’, component: UserFriends },
    ]
    }
    ]
    }
    ]

I usually use the first method because I don’t see why I’d need to have a Users component for both the Users list & the Users details.
What are the reasons to prefer the 2nd method?

The application I’m working on has lots of navigations & tabs. (Thinks a main navigation with lots of links like “Users - Posts - Comments - …” and tabs in the User details like “Profile - Friends - Posts - …”. Maybe that helps give some context.