我在这里写作,因为我找不到答案,或者更好的是,我发现自己无法提出合适的问题来找到答案。我的问题是:
给定App.vue结构:(简化(
<v-main>
<v-container fluid fill-height>
<router-view />
</v-container>
</v-main>
和Component.vue结构:
<v-row>
<v-col>
Component Content
</v-col>
</v-row>
为什么使用普通<v-container>
包裹渲染组件?:
<main class="v-main" style="padding: 64px 0px 0px;">
<div class="v-main__wrap">
<div class="container container--fluid fill-height"> // App.vue
<div class="container"> // ????
<div class="row"> // component code
<div class="col">
它是某种秘密的vue-router
还是vuetify
模板?有人能解释为什么会发生这种情况吗?如果有办法避免的话?
编辑:版本:
Dependencies:
req: inst:
core-js ^3.8.3 3.21.1
vue ^2.6.14 2.6.14
vue-router ^3.5.1 3.5.3
vuetify ^2.6.0 2.6.4
vuex ^3.6.2 3.6.2
Dev dependencies:
req: inst:
@babel/core ^7.12.16 7.17.7
@babel/eslint-parser ^7.12.16 7.17.0
@vue/cli-plugin-babel ~5.0.0 5.0.3
@vue/cli-plugin-eslint ~5.0.0 5.0.3
@vue/cli-plugin-router ~5.0.0 5.0.3
@vue/cli-plugin-vuex ~5.0.0 5.0.3
@vue/cli-service ~5.0.0 5.0.3
eslint ^7.32.0 7.32.0
eslint-plugin-vue ^8.0.3 8.5.0
sass ~1.32.0 1.32.13
sass-loader ^10.0.0 10.2.1
vue-cli-plugin-vuetify ^2.4.7 2.4.7
vue-template-compiler ^2.6.14 2.6.14
vuetify-loader ^1.7.0 1.7.3
好吧,糟糕的是,我没有意识到这是因为这个特定子视图<v-container>
的父组件没有标记为流体。现在全部修复。由于父级只是一个带有容器和路由器视图的模板,没有任何逻辑,我完全忘记了它