In Vue.js how to use multiple router-views one of which is inside another component?

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?

Answer

The reason the sidebar disappeared is all the components are rendered in the first <router-view> besides the <main-header>.

You should use the nested router by configuring children in the sidebar router like:

const router = new VueRouter({
  routes: [
    { path: '/your-sidebar-url', component: your-sidebar-page,
      children: [
        {
          // A will be rendered in the second <router-view>
          // when /your-sidebar-url/a is matched
          path: 'a',
          component: A
        },
        {
          // B will be rendered in the second <router-view>
          // when /your-sidebar-url/b is matched
          path: 'b',
          component: B
        }
      ]
    }
  ]
})

More info in nested routes