Vue JS 路由器显示在页面中间答案

【问题标题】：Vue JS Router showing in middle of pageVue JS 路由器显示在页面中间
【发布时间】：2018-05-05 17:08:47
【问题描述】：

所以我正在学习 Vue JS 并开始构建一个应用程序。我有 vue 路由器，但似乎当我使用它时，它使内容在整个路由组件周围有很大的边距/填充。我已经尝试单独包装 v-app（我正在使用 Vuetify for UI），更改 CSS 等。

If you look at the picture, you can see the tip of the header at the very top, barely visible. I want these to be close together. The footer is automatically placed the same distance further down the page. It seems like the page is trying to keep a certain height (yes, I've tried changing it)

首页.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>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

想通了，哈。对于遇到这种情况的其他人。你只使用一次。围绕您的路由器视图，而不是围绕其余组件。（使用 Vuetify 时会发生这种情况。

【讨论】：