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

Question

更新|找到了原因：

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

问题

我不确定它是否应该起作用。

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

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

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

CODE：

App.vue | router =＆gt; 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>