Quasar 组件未加载

Question

嗨，我有一个包含路由器、Pinia、eslint 和 TypeScript 的 Quasar 项目。

我的问题是，如果组件直接注入到布局（下面的 MainLayout）中，而不是组件上（如果注入到 OrdersPage 中），则组件会加载。

文件结构如下：

src
    ├── components
    │   └── HeaderView.vue
    ├── layouts
    │   └── MainLayout.vue
    ├── pages
    │   └── OrdersPage.vue
    └── router
        └── routes.ts

MainLayout.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-page-container>
      <HeaderView />
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import HeaderView from 'src/components/HeaderView.vue';
</script>

订单页面.vue

<template>
  <q-page padding>
    <!-- <HeaderView /> -->
    <q-drawer show-if-above v-model="this.leftDrawerOpen" side="left" bordered>
      123 234 345 567
    </q-drawer>

    <!-- <OrderCard /> -->
    <q-footer elevated class="bg-grey-8 text-white">
      <q-tabs
        align="left"
        v-model="activeTab"
        inline-label
        switch-indicator
        indicator-color="primary"
        class="bg-lime text-dark shadow-2"
      >
        <q-tab
          v-for="(tab, index) in tabs"
          :key="tab.name + index"
          :name="tab.name"
          :icon="tab.icon"
          :label="tab.label"
        />
      </q-tabs>
    </q-footer>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import HeaderView from 'src/components/HeaderView.vue';
import OrderCard from 'src/components/OrderCard.vue';
import { useUiElementsStore } from 'src/stores/uiElementsStore';
import { TabType } from 'src/components/models';

const uiElementsStore = useUiElementsStore();
const leftDrawerOpen = computed(() => uiElementsStore.leftDrawerOpen);

const tabs: TabType[] = ref([
  {
    name: 'delivery',
    icon: 'phone',
    label: 'Deliver',
  },
  {
    name: 'tables',
    icon: 'chair_alt',
    label: 'Table',
  },
]);

const activeTab = ref('tables');

export default defineComponent({
  name: 'OrdersPage',
});
</script>

HeaderView.vue

<template>
  <q-header elevated class="bg-primary text-white" height-hint="98">
    <q-toolbar>
      <q-btn
        dense
        flat
        round
        icon="menu"
        @click="uiElementsStore.toggleLeftDrawer()"
      />

      <q-toolbar-title>
        <q-avatar>
          <img src="../assets/Images/sugar_icon.png" />
        </q-avatar>
      </q-toolbar-title>

      <q-btn-group push>
        <q-btn
          no-caps
          text-color="white"
          push
          icon="navigate_before"
          flat
          @click="dateIncrement(-1)"
        />
        <q-btn
          no-caps
          text-color="white"
          icon="today"
          push
          flat
          :label="formattedSelectedDate"
        >
          <q-popup-proxy ref="datePickerPopUp">
            <q-date
              v-model="selectedDate"
              minimal
              @update:model-value="hideDatePicker()"
            />
          </q-popup-proxy>
        </q-btn>
        <q-btn
          no-caps
          text-color="white"
          push
          icon="navigate_next"
          flat
          @click="dateIncrement(+1)"
        />
      </q-btn-group>
    </q-toolbar>
  </q-header>
</template>

<script setup lang="ts">
import { ref, computed, Ref } from 'vue';
import { date } from 'quasar';
import { useUiElementsStore } from 'src/stores/uiElementsStore';

const uiElementsStore = useUiElementsStore();

const datePickerPopUp = ref(null); //used to ref the datePickerPopUp element

let selectedDate: Ref<string> = ref(Date());

const formattedSelectedDate = computed(() => {
  return date.formatDate(selectedDate.value, 'D/M/YYYY');
});

function dateIncrement(dateIncrement: number) {
  selectedDate.value = date
    .addToDate(selectedDate.value, {
      days: dateIncrement,
      months: 0,
    })
    .toDateString();
}

function setDate(date: Date) {
  selectedDate.value = date.toDateString();
}

function hideDatePicker() {
  this.datePickerPopUp.hide();
}
</script>

路线.ts

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    // Components register layouts
    component: () => import('layouts/MainLayout.vue'),

    // Children register pages
    children: [
      { path: '', component: () => import('pages/OrdersPage.vue') },
      { path: '/stats', component: () => import('pages/StatsPage.vue') },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

export default routes;

有什么想法吗？

提前致谢

Answer 1

Quasar 布局组件（页眉、页脚、抽屉）将向上流动到最近的 QLayout，这就是它们的重点

https://quasar.dev/layout-builder/

如果你想在页面

内部使用它们，它应该有一个子布局，请参阅https://quasar.dev/layout/layout#containerized-qlayout