[Vuejs]-Vue, content from routerview hidden

I found a better solution to implement what I wanted.

Toolbar.vue

<template>
    <nav>
        <v-app-bar color="#524366" app dark>
            <div class="d-flex align-center">
                <v-img
                    alt="Sultana Logo"
                    class="shrink mr-2 hidden-md-and-down"
                    contain
                    src="@/assets/logo.png"
                    transition="scale-transition"
                    width="80"
                />
            </div>
            <v-spacer class="hidden-md-and-down"></v-spacer>
            <v-app-bar-nav-icon class="hidden-lg-and-up" right @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-btn right class="hidden-md-and-down" v-for="(item, index) in this.navButtons" :key="index" :to="item.route" text>
                {{ item.title }}
                <v-icon :key="index" class="material-icons ml-2">{{ item.iconName }}</v-icon>
            </v-btn>
        </v-app-bar>

        <v-navigation-drawer v-model="drawer" :color="color" absolute dark>
            <v-list shaped dense nav class="py-0">
                <v-list-item two-line>
                    <v-list-item-content>
                        <v-list-item-title>Site Navigation</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>

                <v-divider></v-divider>

                <v-list-item v-for="item in this.navButtons" :key="item.title" :to="item.route" link>
                    <v-list-item-icon>
                        <v-icon class="material-icons">{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

    </nav>

</template>


<script>

export default {
    name: 'TopBar',

    data() {
        return {
            drawer: false,
            color: '#4c5073',
        }
    },

    props: {
        navButtons: {
            type: Array
        }
    }
};
</script>

App.vue

<template>
  <v-app>

    <v-content>
      <Toolbar v-bind:navButtons="navButtons"></Toolbar>
            <router-view></router-view>

    <!-- <SideBar class="hidden-lg-and-up" v-bind:navButtons="navButtons"></SideBar>
    <TopBar class="hidden-md-and-down" v-bind:navButtons="navButtons"></TopBar> -->

    </v-content>

  </v-app>

</template>

<script>
// import TopBar from './components/Navigation/TopBar'
// import SideBar from './components/Navigation/SideBar'
import Toolbar from '@/components/Navigation/Toolbar'

export default {
  name: 'App',
  data() {
    return {
      navButtons: [
        { title: "Home", icon: "home", route: "/" },
        { title: "Search", icon: "search", route: "/search" },
        { title: "About Us", icon: "help", route: "/about" }
      ]
    }
  },
  components: {
    // TopBar,
    // SideBar
    Toolbar
  }

};
</script>