在 vuetify 中跨“default.vue”和“index.vue”维护网格系统

Question

我是 vue 的新手，这可能是非常基本的问题。我想要一个 3 列布局的页面，其中两列应该在 default.vue 中，一列应该在一个页面中，比如 index.vue。我已经在 default.vue 中创建了所有内容并且它工作正常但是当我将内容移动到 index.vue 文件时我无法维护它。以下是我所拥有的概览：

<html>
 <body>  
  <div class="row">
    <div class="col-2">
      <div class="row">
        <div class="col">
          Navigation
        </div>
      </div>
    </div>
    <div class="col-8"> <!-- I need this div in index.vue -->
      <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
      </div>
      <div class="row">
        <div class="col">Card 1</div>
        <div class="col">Card 2</div>
        <div class="col">Card 3</div>
      </div>
    </div>
    <div class="col-2">
      <CompanyCard></CompanyCard>
    </div>
  </div>
</body>
</html>

在这里，如果我将包括 col-8 在内的整个 div 移动到 index.vue，那么 CompanyCard 会向左移动 Navigation 和主要 div 低于那个。另一方面，如果我只是将行 <div class="col-8"> 保留在 default.vue 中并将内容（其中的 2 行）移动到 index.vue。 CompanyCard 保持在右边，因为它应该在右边，但中间列是空白的，内容在它下面。如何在 default.vue 和 index.vue 中维护 3 列格式？

我正在使用 Nuxt 和 Vuetify。

谢谢！

Answer 1

如果您正在使用 Nuxt，那么您应该在 defualt.vue 中使用 <Nuxt /> 组件。这将包括页面组件你可以查看 nuxt layout docs

default.vue 的示例：

<template>
    <div class="row">
        <div class="col-2">
            <div class="row">
                <div class="col"> Navigation </div>
            </div>
        </div>
        <div class="col-8">
            <!-- I need this div in index.vue -->
            <Nuxt />
            <div class="row">
                <div class="col">Card 1</div>
                <div class="col">Card 2</div>
                <div class="col">Card 3</div>
            </div>
        </div>
        <div class="col-2">
            <CompanyCard></CompanyCard>
        </div>
    </div>
</template>

现在在您的 index.vue 添加：

<template>
    <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
    </div>
</template>

在 vuetify 中跨“default.vue”和“index.vue”维护网格系统

Maintain grid system across `default.vue` and `index.vue` in vuetify

css

css-grid

vue.js

nuxt.js

vuetify.js