Vue.js Vue路由器：更改其父路由器视图的子路由

我有一个父视图，在该视图中，我在右窗格中显示一个列表和一些元数据，当我在列表上单击右窗格组件时，我希望替换右窗格组件以显示特定的项目数据：

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”子级，这对我来说很有意义，因为它保留了主视图，并且路径只是用一个特定的ID扩展的

---

我说得对吗？您能建议一种实现方法吗？

正确的模板组成和路由配置如下：

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

路线：
[
{ 
路径：“/list”，
名称：“名单”，
组件：（）=>导入（@/views/ListView”），
儿童：
[
{
路径：“”，
名称：'元数据'，
组件：（）=>导入（@/views/listmatadata”），
},
{
路径：“：itemId”
名称：“项目”
组件：（）=>导入（@/views/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"),
     }
    ]
  }
]