I have a Vue.js single page application where there is a main navbar that uses <router-view/> to render different pages.

Something like this:

<main-header/> <!-- navigation links -->

<transition name=slide-fade mode=out-in>

  <router-view/> <!-- different pages -->

</transition>

In one of those pages I have a sidebar that has more navigation links (that are using <router-link/> just like the main navbar.

Something like this:

<sidebar/> <!-- navigation links -->

<div class=content>

  <transition name=slide-fade mode=out-in>

    <router-view/> <!-- content beside the sidebar -->

  </transition>

</div>

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.

How do I achieve the desired result? How do I use multiple <router-view/>s one of which is inside another component, like the example above?