我可以用 v-main 删除它吗？

Question

底部的紫色大方块是什么，如何删除？

<template>
  <v-app>
  <template>
      <header>
        <div>
          <Header v-if="!$route.meta.hideHeader" />
        </div>
      </header>
      <router-view/>
    </template>

<template>
      <footer>
        <div>
          <Footer v-if="!$route.meta.hideFooter" />
        </div>
      </footer>
</template>
  </v-app>
</template>

这是我的 app.vue 我认为 app.vue 做到了，也许我需要添加 v-main？以及我必须通过那里的东西

也许它看起来像这样？？

<template>
  <v-app>

    <template>
    <header>
        <div>
          <Header v-if="!$route.meta.hideHeader" />
        </div>
      </header>
    <router-view/>
  </template>

    <v-main>
   </v-main>

    <template>
      <footer>
        <div>
          <Footer v-if="!$route.meta.hideFooter" />
        </div>
      </footer>
  </template>

  </v-app>
</template>

Answer 1

屏幕截图中的紫色框是 flexbox 叠加层（Chrome 90 中添加的 Chrome 的 Flexbox debugging tools 的一部分）which shows the available space in the box。

要让应用内容填充可用空间，请在主要内容周围使用v-main。 docs 为与您的示例匹配的应用程序推荐以下布局（带有页眉、主视图、路由器视图和页脚）：

<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- Sizes your content based upon application components -->
  <v-main>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>

      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-main>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

demo