组件的元素没有占据页面宽度的 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>