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>

如果可以帮助我，谢谢问候

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

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

1 个答案: