组件的元素不占用页面宽度的100％

Question

更新|找到了这个原因：

如果你把<router-view>放在<main>标签中，这将会发生。

---

题

我不确定这是不是应该如何运作。

但该组件不占用页面宽度的100％。你总是需要手动指定组件的宽度（路由页面）或者我做错了吗？

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

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

码：

App.vue | router => 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 page

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