@nen0y

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

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

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

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


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


Как сделать, что-бы при переходе на страницу которая должна быть без сайдбара, она не отображалась?
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
fallus
@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% (наверное)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы