Как показать дочерний вид без родительского просмотра в vuejs? - PullRequest
Новая
       14

Как показать дочерний вид без родительского просмотра в vuejs?

0 голосов
/ 27 марта 2019

Я пытаюсь показать дочерний вид маршрута в другом виде, а не внутри родительского вида маршрута, у меня есть следующие маршруты в модуле 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 /: пользователь показывает мне дочернее представление внутри родительского представления через представление маршрутизатора 

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

Если бы вы могли мне помочь, спасибо С уважением

1 Ответ

0 голосов
/ 27 марта 2019

Создайте отдельный маршрут для пользовательского маршрута, а не для детей пользователей 

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