Представление дочернего маршрутизатора Vuetify отображается неправильно - PullRequest
Новая
       42

Представление дочернего маршрутизатора Vuetify отображается неправильно

0 голосов
/ 29 мая 2020

Я пытаюсь создать дочерний маршрутизатор-представление в качестве содержимого для окружающих компонентов.

Моя маршрутизация выглядит следующим образом: 

{
    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"),
          },
        ],
      },
    ],
  },

Мой компонент Dashboard выглядит следующим образом: 

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

    <DashboardNavDrawer />

    <DashboardView />

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

Проблема, с которой я сталкиваюсь, заключается в том, что DashboardView отображается под навигационным окном вместо ожидаемого результата, который находится рядом с ним.

Результат, который я получаю с любой комбинацией v-app или v-content выглядит следующим образом:

current result

В настоящее время компонент DashboardView выглядит следующим образом: 

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

I Я немного запутался в том, что мне нужно изменить / добавить / удалить, чтобы дочерний маршрутизатор отображался рядом с ящиком

1 Ответ

0 голосов
/ 29 мая 2020

Мне удалось исправить вышеуказанное, используя опору 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>

Добавление этой опоры сделало его похожим на следующий снимок экрана, который является желаемым результатом:

desired result achieved

Комментарий предоставлен YomS. привели меня к этому ответу, поэтому я хотел бы express поблагодарить его за помощь!

...