vue-router заменить родительский вид subRoute

Question

Я использую vue-router и задаю вопрос относительно subRoutes. Я хотел бы настроить маршруты, поэтому основными маршрутами являются списки, а subRoutes - такие, как edit/add/etc.

Я хочу, чтобы компоненты subRoute заменили <router-view> родительского маршрута. Как я понимаю документацию и из того, что я тестировал, похоже, я должен определить еще один <router-view> в шаблоне родительских компонентов для того, чтобы subRoute отображался, но тогда список пользователей оставался бы видимым.

Пример маршрута:

'/users': { 
    name: 'user-list', 
    component(resolve) { 
     require(['./components/users.vue'], resolve) 
    }, 
    subRoutes: { 
     '/add': { 
      name: 'add-user', 
      component(resolve) { 
       require(['./components/users_add.vue'], resolve) 
      } 
     } 
    } 
} 

Общий вид маршрутизатора: список

<!-- main router view --> 
<div id="app"> 
    <router-view></router-view> 
</div> 

Пользователь:

<template> 
    <a v-link="{ name: 'add-user' }">Add</a> 
    <ul> 
     <li>{{ name }}</li> 
    </ul> 
</template> 

Добавить пользователя:

<template> 
    <div> 
     <a v-link="{ name: 'user-list' }">back</a> 
     <input type="text" v-model="name"> 
    </div> 
</template> 

Когда я нажимаю «Добавить», я хочу быть заполнен шаблоном-дополнением. Это возможно?

Кроме того, могу ли я установить отношения между родителями и дочерними элементами между пользовательскими и пользовательскими компонентами? Я хотел бы иметь возможность передавать реквизиты (список пользователей) в компонент добавления и отправлять события обратно в список пользователей.

Спасибо!

Answer 1

Так что я немного поиграл с этим и, наконец, понял, как это можно достичь. Хитрость заключается в том, чтобы сделать листинг subRoute тоже, и у корневого уровня есть только контейнер <router-view> для всех дочерних компонентов для визуализации. Затем переместите материал «загрузка списка» в родительский компонент и передайте список в список-компонент в качестве опоры. Затем вы можете сообщить родителям, чтобы перезагрузить список через события.

На данный момент это работает как шарм. Единственным недостатком является то, что у меня есть другой компонент, который мне действительно не нужен. Я отвечу на пример, когда найду время.

Answer 2

Звучит так, как будто редактирование/добавление маршрутов не должно быть субстратами, просто так.

только потому, что путь заставляет его казаться, что вложенность не означает, что вы должны на самом деле их гнездиться.

'/users': { 
    name: 'user-list', 
    component(resolve) { 
     require(['./components/users.vue'], resolve) 
    } 
}, 
'users/add': { 
    name: 'add-user', 
    component(resolve) { 
     require(['./components/users_add.vue'], resolve) 
    } 
}