title: In Vue.js how to use multiple router-views one of which is inside another component?
body: <p>I have a Vue.js single page application where there is a main navbar that uses <code>&lt;router-view/&gt;</code> to render different pages.</p>
  
  <p>Something like this:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;main-header/&gt; &lt;!-- navigation links --&gt;
  &lt;transition name="slide-fade" mode="out-in"&gt;
    &lt;router-view/&gt; &lt;!-- different pages --&gt;
  &lt;/transition&gt;
  </code></pre>
  
  <p>In one of those pages I have a sidebar that has more navigation links (that are using <code>&lt;router-link/&gt;</code> just like the main navbar.</p>
  
  <p>Something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;sidebar/&gt; &lt;!-- navigation links --&gt;
  &lt;div class="content"&gt;
    &lt;transition name="slide-fade" mode="out-in"&gt;
      &lt;router-view/&gt; &lt;!-- content beside the sidebar --&gt;
    &lt;/transition&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on the sidebar navigation links I want the content beside the sidebar to change as well as the url to change. However, I lose the sidebar, and just get the component that is to be rendered in the content section.</p>
  
  <p>How do I achieve the desired result? How do I use multiple <code>&lt;router-view/&gt;</code>s one of which is inside another component, like the example above?</p>