当加载路由视图时，组件自动包裹有额外的 v-container

Question

我写在这里，因为我找不到答案，或者更好的是，我发现自己无法提出合适的问题来找到它。我的问题是：

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

为什么渲染后的组件用plain包裹<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

Answer 1

好吧，不好意思，我没有意识到这是因为这个特定子视图的父组件 <v-container> 没有标记为流动的。现在都修好了。由于父级只是一个带有容器和 router-view 的模板，没有任何逻辑，我完全忘记了它。

当加载路由视图时，组件自动包裹有额外的 v-container

Component automagically wrapped with additional v-container when loaded with router-view

vue.js

vue-router

vuetify.js