title: Vue-router: Child route to change a view of its parent
body: <p>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:</p>
  
  <pre><code>export default {
    mode: 'history'
    base: process.env.BASE_URL,
    routes: [
      { 
         path: "/list", 
         name: "list", 
         components:  {
           mainView: () =&gt; import("@/views/ListView"),
           rightPane: () =&gt; import("@/views/ListMetadata")
        },
       children: [
         {
           path: ":itemId"
           name: "item"
           components: {
             rightPane: () =&gt; import("@/views/ItemData")
           }
         }
       ]
      }
    ]
  }
  </code></pre>
  
  <p>My template looks like:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div id="content"&gt;
        &lt;div id="rightPane"&gt;
          &lt;router-view name="rightPane"&gt;&lt;/router-view&gt;
        &lt;/div&gt;
        &lt;router-view name="mainView"&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Am I right? can you suggest a way to achieve it?</p>