title: Hide sidebar component some page in VUE.js
body: <p>I am working with Vue.js and I have a question.</p>
  <p>Is there a way to hide <code>sidebar</code> component only some page ?
  This is my code below.</p>
  <p>router.js</p>
  <pre><code>  const routes = [
    {
      path: '/',
      redirect: '/home',
      component: () =&gt; import('@/layout/MainLayout'),
      children: [
        {
          path: 'home',
          name: 'Home',
          component: () =&gt; import('Views/Home.vue'),
        }, 
      ],
    },
    {
      path: '/subpage',
      redirect: '/subpage/subpage',
      component: () =&gt; import('@/layout/MainLayout'),
      children: [ 
        {
          path: 'subpage',
          name: 'Subpage',
          component: () =&gt; import('Views/Subpage/Subpage.vue'),
        }, 
      ],
    }, 
  ];
  </code></pre>
  <p>MainLayout.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;content&quot; class=&quot;content&quot;&gt; 
      &lt;router-view&gt;&lt;/router-view&gt; 
      &lt;Sidebar&gt;&lt;/Sidebar&gt; 
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Sidebar from '@/components/Sidebar.vue'; 
  
  export default {
    components: {
      Sidebar, 
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Do I need to make another layout? like <code>MainLayout2.vue</code></p>
  <p>Please help.</p>