vue.js - 我可以用 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>

标签： vue.jsvuetify.js

Answer 1

屏幕截图中的紫色框是一个 flexbox 叠加层（Chrome 90 中添加的 Chrome 的Flexbox 调试工具的一部分），它显示了框中的可用空间。

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

<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>

演示