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

You need to use named views. Provide the name attribute to the view.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>

And configure them like

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar
      }
    }
  ]
})

Please refer to the official docs.

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

@adoug answer helped me.

But in my case, I had named both router-view:

I did this to fix it:

<router-view name='a'/>
<router-view name='b'/>

You have , somewhere inside you FatherComponent.vue mounted in a you have a second

I did this, to fix it:

const router = new VueRouter({
    routes: [
        { path: '/your-sidebar-url',
            components: {
                a: FatherComponent //you sidebar main component in 'a' name of routed-view
            },
            children: [
                {
                    // A will be rendered in the second <router-view>
                    // when /your-sidebar-url/a is matched
                    path: '/child-path/a',
                    components: {
                        b: ChildComponentA //note that 'b' is the name of child router view
                    }
                },
                {
                    // B will be rendered in the second <router-view>
                    // when /your-sidebar-url/b is matched
                    path: '/child-path/b',
                    components: {
                        b: ChildComponentB //note that 'b' is the name of child router view
                    }
                }
            ]
        }
    ]
})