Question

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

我的路由如下：

{
    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>

为了让子路由器视图显示在抽屉旁边，我对需要进行的更改/添加/删除感到迷茫

Answer 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提供的评论。使我得到这个答案，所以我要感谢他的帮助！

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

1 个答案: