Vue -router: дочерний маршрут, чтобы изменить представление своего родителя - PullRequest
Новая
       3

Vue -router: дочерний маршрут, чтобы изменить представление своего родителя

0 голосов
/ 15 января 2020

У меня есть родительское представление, в котором я отображаю список и некоторые метаданные на правой панели, и я хочу заменить компонент правой панели, чтобы отобразить определенные c данные элемента, когда я нажимаю на них в списке: 

export default {
  mode: 'history'
  base: process.env.BASE_URL,
  routes: [
    { 
       path: "/list", 
       name: "list", 
       components:  {
         mainView: () => import("@/views/ListView"),
         rightPane: () => import("@/views/ListMetadata")
      },
     children: [
       {
         path: ":itemId"
         name: "item"
         components: {
           rightPane: () => import("@/views/ItemData")
         }
       }
     ]
    }
  ]
}

Мой шаблон выглядит так: 

<template>
  <div id="app">
    <div id="content">
      <div id="rightPane">
        <router-view name="rightPane"></router-view>
      </div>
      <router-view name="mainView"></router-view>
    </div>
  </div>
</template>

Итак, когда я перехожу из «списка» в «элемент», я ожидаю, что правая панель изменится с ListMetadata на ItemData. Но в действительности ItemData не загружается, я думаю, это потому, что дочерний маршрут «не» знает свое родительское представление. Я поставил маршрут «item» как дочерний «list», так как он имеет смысл для меня, потому что основной вид он сохранил, а путь только расширен с указанным c ID.

Являюсь ли я правильно? Можете ли вы предложить способ достичь этого?

1 Ответ

0 голосов
/ 15 января 2020

Правильная композиция шаблона и конфигурация маршрутов будет выглядеть так: 

/list                                                   /list/:itemId
+-----------------------------------+                  +------------------------------+
| ListContainer                     |                  | ListContainer                |
| +----------+--------------------+ |                  | +----------+---------------+ |
| | ListView | ListMetaData       | |  +------------>  | | ListView | ItemData      | |
| +----------+--------------------+ |                  | +----------+---------------+ |
+-----------------------------------+                  +------------------------------+

<!-- App.vue -->
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<!-- ListContainer.vue -->
<template>
  <div id="content">
    <div id="rightPane">
      <router-view />
    </div>
    <list-view />
  </div>
</template>

routes: 
[
  { 
    path: "/list", 
    name: "list", 
    component: () => import("@/views/ListView"),
    children: 
    [
     {
       path: '',
       name: 'metaData',
       component: () => import("@/views/ListMetadata"),
     },
     {
       path: ":itemId"
       name: "item"
       component: () => import("@/views/ItemData"),
     }
    ]
  }
]
...