Как написать правильный роут?

Question

[nen0y]

Есть два типа страниц:
1) С сайдбаром
2) Без сайдбара

По дефолту все страницы отображаются с сайдбаром:

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

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

Как сделать, что-бы при переходе на страницу которая должна быть без сайдбара, она не отображалась?

Answer 1

[fallus]

Например так.
Это роуты, у которых можно создать свой meta.

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

Если sidebar это <Menu />, то:
<Menu v-if="$route.meta && $route.meta.sideBar" />

spoiler

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

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

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

Comments

[nen0y]

спасибо