javascript - 如何在 vuejs 中显示没有路由器视图父视图的子视图？

Question

我试图在另一个视图中而不是在父路由视图中显示子路由视图，我在 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

当输入路径 /users/:user 通过路由器视图向我显示父视图内的子视图

<!-- 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>

我需要将它直接显示在另一个独立视图中，而不是在父视图中，它会是这样的：

<!-- 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>

如果你能帮助我，谢谢你的问候

标签： javascriptvuejs2vue-router

Answer 1

为用户路由创建单独的路由，而不是用户的孩子

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