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

Question

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

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

如何让它加载到 body/main 区域而不是边栏？

我的组件的代码片段 (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 中。有什么方法可以在不使用 props/events 的情况下在主页中显示新的 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

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

Sidebar component to render on main page (body)

javascript

node.js

vue.js

quasar