How to write the correct route?

Question

Vue.js

There are two types of pages:
1) With a sidebar
2) Without a sidebar

By default, all pages are displayed with a sidebar:

<template>
  <div id="app">
    <MainLayout />
  </div>
</template>

<template>
  <div class="pages">
    <Menu />
    <router-view />
  </div>
</template>

How to make it so that when you go to a page that should be without a sidebar, it is not displayed?

Answer 1

For example so.
These are routes where you can create your own meta.

{
        name: 'myHomePage',
        path: '/',
        component: HomePage,
        meta: { sideBar: true }
},
{
        name: 'Products',
        path: '/',
        component: ProductsPage,
        meta: { sideBar: false }
},

If sidebar is , then:<Menu />
<Menu v-if="$route.meta && $route.meta.sideBar" />

spoiler

Ну а CSS потом лучше поправить, если правильно не сделано.
Если у роутов ширина фикцированная, учитывающая ширину меню, то лучше сделать примерно так:

#menu + .myRouteWrapper{
width: calc(100% - var(--menuWidth))
}

То есть, если Меню не будет отрендерено, то ширина контента будет 100% (наверное)