Question

所以我正在学习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)

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时会发生。

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

1 个答案: