Vue JS Router показывает в середине страницы

Question

Итак, я изучаю Vue JS и начал создавать приложение. У меня есть маршрутизатор vue, но кажется, что когда я его использую, контент имеет большой запас / заполнение вокруг всего маршрутизируемого компонента. Я пробовал оборачиваться в v-app (я использую Vuetify for UI) отдельно, менял CSS и т. Д.

Если вы посмотрите на картинку, то увидите верхнюю часть заголовка, едва заметную. Я хочу, чтобы они были близко друг к другу. Нижний колонтитул автоматически размещается на том же расстоянии дальше вниз по странице. Кажется, что страница пытается сохранить определенную высоту (да, я пытался изменить ее)

Home.vue

 <template lang="html">
  <v-app>
    <appHeader></appHeader>
    <div class="">
      Home
    </div>
    <appFooter></appFooter>
  </v-app>
</template>

App.vue

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

<script>
</script>

<style>
  html, body, #app {
    margin: 0;
    padding: 0;
    background: #ccc;
  }
</style>

маршрутизатор / index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'

Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        }
      ]
    })

Header.vue

<template lang="html">
  <v-app>
    <v-content>
      <v-container>

        <v-toolbar dark>
          <v-toolbar-title>
            <v-btn
              block
              flat
              large
              fab
              color="blue"
              >TITLE</v-btn>
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <!-- Guest Tabs-->
          <v-toolbar-items v-if="!isLogged">
            <v-btn
              flat
              small
              color="yellow"
              :key="tab"
              v-for="tab in guestTabs"
              >
              {{ tab }}
            </v-btn>
          </v-toolbar-items>
          <!-- User Tabs-->
          <v-toolbar-items v-else>
            <v-btn
              flat
              small
              color="yellow"
              :key="tab"
              v-for="tab in userTabs"
              >
              {{ tab }}
            </v-btn>
          </v-toolbar-items>
        </v-toolbar>
      </v-container>

    </v-content>
  </v-app>
</template>

Answer 1

Разобрался, ха. Для других, кто сталкивается с этим. Вы используете только один раз. Вокруг вашего роутера, а не вокруг остальных компонентов. (Это происходит при использовании Vuetify.