How to add all other components under a navbar component so that navbar is visible all the times

Question

I want to make the navbar component visible all the times. Currently if i go to other component, say About page. The about component gets called below the navbar component.

Image before clicking about link [1]: https://i.sstatic.net/N0qdw.png

Image after clicking about link [2]: https://i.sstatic.net/JWzJ3.png

How can I make it like navbar component will always stay on its place and other components should wrap inside navbar soo that it looks proper how it should be.

I am using vue-material UI for the navbar

Code for navbar component

<template>
  <div class="hello">
  <div class="page-container">
    <md-app md-mode="reveal">
      <md-app-toolbar class="md-primary">
        <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">My Title</span>
      </md-app-toolbar>Rs

      <md-app-drawer :md-active.sync="menuVisible">
        <md-toolbar class="md-transparent" md-elevation="0">Navigation</md-toolbar>

        <md-list>
           <md-list-item>
            <md-icon>move_to_inbox</md-icon>
            <a href="about" class="md-list-item-text">About</a>
          </md-list-item>

         
        </md-list>
      </md-app-drawer>

      <md-app-content>
      
      </md-app-content>
    </md-app>
  </div>
  </div>
</template>


<style lang="scss" scoped>
  .md-app {
     max-height: 400px;
    border: 1px solid rgba(#000, .12);
    height: 100vh;
  }

   // Demo purposes only
  .md-drawer {
    width: 230px;
    max-width: calc(100vw - 125px);
  }
</style>

<script> 
// import About from './About.vue'
export default {

  name: 'Reveal',
  components:{},
  data: () => ({
    menuVisible: false
  })
}
</script>

code for index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  
  
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/Navbar/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Code for About component

<template>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        
    </div>
    
</template>

Code for App.vue

<template>
  <div id="app">
    <Navbar/>
    <router-view/>
  </div>
</template>

<script type="text/javascript">
  import Navbar from './components/Navbar/Navbar.vue'
  export default{
    components:{
      Navbar // register component
    }
  }

</script>


<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

Answer 1

Put you navigation in a main router view, and then declare your components as children of that route. eg:

  code for index.js


  [...]

  {
    path: '/home',
    name: 'home',
    component: Home,
  },
  {
    path: '/dashboard',
    redirect: "/dashboard",
    name: 'Dashboard',
 
    <!-- IN THE DASHBOARD COMPONENT YOU INSERT YOUR NAVBAR  and Router view-->
    component: Dashboard,
    children: [

        {
            path: "/something-else-with-navabar",
            name: "Something",
            component: something
        },
      
     [...]

The dashboard component then should look like this:

  <!-- This will go in a component holding the base layout of you app (nav + content -->
   <template>
      <div>
         <div class="div-content">

            <!-- This is a component with your navigation
            <navigation-bar></navigation-bar>

            <!-- This will render the child component
            <router-view></router-view>
         </div> 
    </template>