组件的元素未占据页面宽度的 100%

Question

更新 |找到原因：

如果您将 <router-view> 放在 <main> 标签中，就会发生这种情况。

问题

我不确定它是否应该这样工作。

但是该组件并未占用 100% 的页面宽度。您是否总是必须手动指定组件（路由页面）的宽度，或者我做错了什么？

我正在使用 Vuetify.js 库（通过 npm 安装）

我希望页面 Home.vue 上的这个元素 <p>some text here</p> 占据页面宽度的 100%（正常情况下），但它不是：

代码：

App.vue |路由器 => Home.vue

   <!-- toolbar and drawer are here -->

    <main>
      <router-view></router-view>
    </main>

  </v-app>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      drawer: false
    }
  }
}
</script>

Home.vue 页

<template>
    <div>
        <p>some text here</p>
    </div>
</template>


<script>
export default {
  name: 'home',
  data () {
    return {
      snackbar: true
    }
  }
}
</script>

Answer 1

这是一个 css 问题，在 Home.vue 中明确将 div 宽度设置为 100% 应该可行：

<css scoped>
div {
  width: 100%;
}
</css>

组件的元素未占据页面宽度的 100%

Elements of a component aren't taking up 100% of the page's width

vue.js

vuetify.js

更新 |找到原因：

问题

代码：

App.vue |路由器 => Home.vue

Home.vue 页