要在主页（正文）上呈现的侧边栏组件

Question

我正在使用 Quasar 的 q-drawer 来显示菜单列表（使用 q-list 和 q-items）。 单击时，每个项目都应在我的页面的正文部分呈现一个新的 vue 组件。

但是，事实并非如此。单击菜单项也会在侧边栏（抽屉）上呈现新的 vue 组件。

如何让它加载到正文/主要区域而不是侧边栏？

我的组件的代码 sn-p (LeftSideBar)：

      <q-list v-for="(menuItem, index) in menuList" :key="index" align="left">
        <q-item clickable v-ripple @click="selected = menuItem.label" active-class="button-highlighted"
      :active="selected === menuItem.label" >

          <q-item-section>
            {{ menuItem.label }}
          </q-item-section>
        </q-item>

      </q-list>

<div v-if="selected == 'Some Text'">
     <SomeNewVue />
</div>

它在我的主布局页面中。

    <q-page-container>
      <q-drawer bordered v-model="isShowLeftDrawer" :width="320" :breakpoint="100" content-class="bg-blue text-white">
        <LeftSidebar/>
      </q-drawer>

      <router-view />
    </q-page-container>

如您所见，LeftSidebar 在q-page-container 中。 有什么方法可以在不使用道具/事件的情况下在主页中显示新的 vue 组件？？

请帮忙！提前致谢！

Answer 1

您需要将组件代码放入q-page-container。它将显示在正文区域。

例如。

<q-page-container>
  <router-view/>
  <div v-if="selected == 'Some Text'">
     <SomeNewVue />
  </div>
</q-page-container>

参考这个 - https://codepen.io/Pratik__007/pen/YzyXJYb?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer