vue.js - Vue-router:改变其父 View 的子路由

Question

我有一个父 View ，我在右 Pane 中显示了一个列表和一些元数据，当我在列表中单击它时，我想替换右 Pane 组件以显示特定的项目数据:

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>

因此，当我从“列表”移动到“项目”时，我希望右侧 Pane 从 ListMetadata 更改为 ItemData。但实际上，ItemData 并没有被加载，我猜这是因为子路由“不知道”它的父 View 。我将“item”路由作为“list”子路由，这对我来说很有意义，因为它保留了主视图，并且路径只是用特定的 ID 扩展。

我说的对吗？你能建议一种实现它的方法吗？

Answer 1

正确的模板组合和路由配置应该是这样的:

/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"),
     }
    ]
  }
]