Vue. js: как организовать маршрутизацию через 3 столбца - PullRequest
Новая
       41

Vue. js: как организовать маршрутизацию через 3 столбца

0 голосов
/ 03 мая 2020

Я пытаюсь настроить страницу, похожую на: 


   ========================================================================
   +    Nav        +    Items      +          Individual Item             +
   +---------------+---------------+--------------------------------------+
   +   * Cats      +     List      +         Individual Selected          +
   +   * Dogs      +      Of       +                Cat                   +
   +               +     Cats      +                 OR                   +
   +               +      OR       +                Dog                   +
   +               +     Dogs      +                                      +
   +               +               +                                      +
   +               +               +                                      +
   ========================================================================

Пример использования: выберите «Кошки» в столбце «Nav» => получить список кошек (через REST / JSON) в столбец «Предметы»; Выберите отдельного Cat из списка => получить отдельного Cat (через REST / JSON) в столбце «Individual Item».

Это похоже на приложение Nested Routes (https://router.vuejs.org/guide/essentials/nested-routes.html ) но мой google-fu должен быть слабым, и я не могу найти 3-уровневый пример, подобный этому.

Легко организовать либо / или подход, когда один правый столбец отображает либо «Список элементов», либо «Элемент».

Я пытался использовать именованные представления, но я дойти до точки, где у меня есть 3 столбца, но когда я рендеринг компонента «Item», то столбец «Список элементов» очищается.

Может быть, мне нужно организовать для отображения обоих «Список Колонки "и" Предметы "одновременно (через" компоненты "в моей конфигурации маршрутизатора), НО это удаленные вызовы REST, так что это слишком тяжело для практического применения. Может быть, в этом случае помогут «вычисленные» или «просматриваемые» свойства?

Есть ли где-нибудь пример этой трехуровневой навигации?

Любая помощь приветствуется.

Править :

я подумал, что это то, что мне нужно: 

<div class="row">
  <div class="col-2 bg-light sidebar">
    <div class="sidebar-sticky">
      <h3 class="h3 pl-3">Actions</h3>
      <navigation />
    </div>
  </div>
  <div class="col-3 ml-auto bg-info px-3">
    <router-view />
  </div>
  <div class="col-7 bg-warning px-3">
    <router-view name="entity" />
  </div>
</div>

... 

{
  path: 'persons',
  component: httpVueLoader('persons.vue'),
  children: [
      {
          path: 'person/:id',
          components: {
            default: httpVueLoader('persons.vue'),
            entity: httpVueLoader('person.vue')
          }
      }
  ]
},
...