Vuetify：路由器视图中的 v-container 做啥？

Posted 2023-02-22

【中文标题】Vuetify：路由器视图中的 v-container 做啥？

【英文标题】：Vuetify: what does v-container inside router-view do?Vuetify：路由器视图中的 v-container 做什么？

【发布时间】：2018-06-01 08:49:23

【问题描述】：

在 Vuetify 的 pre-defined layouts 中，有两段非常相似的示例代码：

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

和

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <router-view>
      <v-container fluid></v-container>
    </router-view>
  </v-content>
  <v-footer app></v-footer>
</v-app>

第二个在我的应用中看起来更好，但它真的让我很困惑。当<router-view>被路由内容替换时，<router-view>里面怎么会有<v-container>？这应该达到什么目的？

【参考方案1】：

当<router-view> 没有匹配的路由时，将显示<router-view> 的任何直接内容。它将被匹配的路由组件替换。在匹配路由之前，它是占位符内容。