Vuetify 子路由器视图显示不正确答案

【问题标题】：Vuetify Child Router View displaying incorrectlyVuetify 子路由器视图显示不正确
【发布时间】：2020-05-29 10:29:43
【问题描述】：

我正在尝试将子路由器视图显示为周围组件的内容。

我的路由如下：

{
    path: "/login",
    name: "TheLoginView",
    component: TheLoginView,
  },
  {
    path: "/dashboard",
    name: "TheDashboard",
    component: () => import("@/views/TheDashboard"),
    children: [
      {
        path: "",
        name: "DashboardView",
        component: () => import("@/components/dashboard/DashboardView"),
        children: [
          {
            name: "Place Order",
            path: "place-order",
            component: () => import("@/views/ThePlaceOrderView"),
          },
          {
            name: "Previous Orders",
            path: "Past-orders",
            component: () => import("@/components/ThePastOrders"),
          },
          {
            name: "Account Options",
            path: "account-options",
            component: () => import("@/components/TheAccountOptions"),
          },
        ],
      },
    ],
  },

我的仪表板组件如下所示：

<template>
  <v-app>
    <DashboardAppBar />

    <DashboardNavDrawer />

    <DashboardView />

    <DashboardFooter />
  </v-app>
</template>

我遇到的问题是 DashboardView 呈现在 navdrawer 下方，而不是旁边的预期结果。

我使用 v-app 或 v-content 的任意组合得到的结果如下：

目前 DashboardView 组件如下所示：

<template>
  <router-view />
</template>

我有点不知道我需要更改/添加/删除什么才能让子路由器视图显示在抽屉旁边

【问题讨论】：

查看pre-made layouts 之一，尤其是"Complex" 以获取与您的需求相似的示例。
@YomS。不知道具体要看什么，但我尝试按照复杂示例格式化我的 DashboardView，但它并没有太大的不同：i.imgur.com/u7jcsMZ.png
@YomS。能够使用相关组件的 app 道具使其工作，我花了一点时间才弄清楚这就是缺少的东西。感谢您朝正确的方向轻推！

标签： javascript vue.js vuex vuetify.js

【解决方案1】：

我能够使用提到的组件的 'app' 属性修复上述问题。

下面的示例使用我的 DashboardNavDrawer 组件，其中我将 'app 添加到组件中：

<template>
  <v-navigation-drawer app class="deep-purple accent-4" dark permanent>
    <v-list>
      <v-list-item
        class="mx-2"
        v-for="(item, index) in mainMenuItems"
        :key="index"
        link
        :to="item.to"
      >
        <v-list-item-icon>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>
            {{ item.name }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

添加此道具使其看起来像以下屏幕截图，这是预期的结果：

YomS 提供的评论。引导我回答这个问题，所以我想对他的帮助表示感谢！

【讨论】：