0

I have a navbar and two side menus which I use in multiple pages. But for a number of pages I don't want to have the side menu.

I have tried using v-if with $router.name, but because I was using a grid system, the layout would break. Then also it was impossible to add more than one component to not render the side menus.

This is the template:

<template>
    <TheNavbar/>
    <div class="container">
      <TheLeftMenu/>
      <router-view/>
      <TheRightMenu/>
    </div>
</template>
MnL
  • 113
  • 9
  • 1
    it can be done in many ways, like [passing props from route](https://router.vuejs.org/guide/essentials/passing-props.html#function-mode) or using [multiple layouts](https://stackoverflow.com/questions/56701836/vue-js-how-to-add-multiple-layout-in-vuejs) – Huzaifa Feb 26 '22 at 17:13

2 Answers2

1

My solution to avoid the grid system to squash the router-view component was to divide the template in two, one using the sidemenus, the other without them.

Then in order to have multiple pages to not load the side menus I used a computed property to hold an array with all the routes to not render the side menus:

<template>
  <div v-if="blockedRoutes.includes($route.name) == false">
    <TheNavbar/>
    <div class="container">
      <TheLeftMenu/>
      <router-view/>
      <TheRightMenu/>
    </div>
  </div>
  <div v-else>
    <TheNavbar/>
    <router-view/>
  </div>
</template>

  computed: {
    blockedRoutes () {
      return ['Register', 'SignIn', 'About']
    }
  }
MnL
  • 113
  • 9
0

you can use the simple method of a flex container;

<template>
<router-view v-slot="{ Component, route }">
 <div class="holder">
  <div>
   <TheLeftMenu/>
  </div">
  <div class="main">
   <transition name="fade" mode="out-in"><component :is="Component" /></transition>
  </div>
  <div v-if="!route.meta.hideRmenu">
   <TheRightMenu/>
  </div>
 </div>
</router-view>
</template>

<style>
.holder{
 display : flex;
 width : 100%;
 /*if you want your container not to grow with the page do the following*/
 overflow: hidden;
 height : 100vh;
}
.holder .main{
 flex : 1;
 flex-direction: row;
 
 /*if you want your container not to grow with the page do the following*/
 max-height : 100vh;
 overflow : auto;
}
.holder :not(.main){
 min-width: 32px;
}
</style>

This way you can, if you want, also add transitions. If you don't want to use transitions, you just need to remove the transitions tags.

This aproach uses is focused for Vue 3 and uses Scoped Slots

Sebas R.
  • 64
  • 8