Vue-router: Child route to change a view of its parent

Question

I have a parent view where I display a list and some metadata in a right pane, and I want to replace the right pane component to show a specific item data, when I click on it on the list:

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

My template looks like:

<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>

So, when I move from “list” to “item”, I would expect the right pane to change from ListMetadata to ItemData. But in reality, the ItemData is not loaded, I guess it’s because the child route “doesn’t” know its parent view. I put the “item” route as a “list” child, as it makes sense to me, because the main view it kept, and the path is just extended with a specific ID.

Am I right? can you suggest a way to achieve it?

Answer 1

The proper template composition and routes configuration would be like this:

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