How to show children view without router-view parent view in vuejs?

Question

I'm trying to show a child route view in another view and not inside the parent route view, i have the next routes in an the module of vue-router:

const users = {
    path: '/users',
    name: 'users',
    component: Users,
    children: [
      { path: ':user', 
        name: 'user', 
        component: User,
        children: [
          { path: 'profile', name: 'profile', component: Profile },
          { path: 'events', name: 'events', component: Events }
        ]
      }
    ]
}
export default home

When entering the path /users/:user shows me the children view inside the parent view through the router-view

<!-- users.vue -->
<!-- path: /users -->
<template>
  <div v-if="(user, index) in users" :key="index">
    <router-link :to="`/users/${user.name}`">{{ user.name }}</router-link>
  </div>
  <!-- Here shows the children view  -->
  <!-- path: /users/:user/ -->
  <router-view/>
</template>

I need it to be shown directly in another independent view and not inside the parent view, It would be something like this:

<!-- users.vue -->
<!-- path: /users -->
<template>
  <div v-if="(user, index) in users" :key="index">
    <router-link :to="`/users/${user.name}`">{{ user.name }}</router-link>
  </div>
</template>

<!-- user.vue -->
<!-- path: /users/:user -->
<template>
  <h1>{{ this.$route.params.name }}</h1>
</template>

If you could help me, thank you regards

Answer 1

Create a separate route for the user route, not the children of users

    const users = [{
      path: '/users',
      name: 'users',
      component: Users,

    },
    {
      path: 'users/:user',
      name: 'user',
      component: User,
      children: [
        { path: 'profile', name: 'profile', component: Profile },
        { path: 'events', name: 'events', component: Events }
      ]
    }
    ]