离子菜单不显示答案

【问题标题】：Ionic Menu does not show离子菜单不显示
【发布时间】：2021-03-24 13:09:12
【问题描述】：

首先，我目前正在做一个 Ionic App + VueJS。

这是我使用它的第一天。现在我在使用 ion-menu 时遇到一个错误，该菜单仅在我导航时显示一次。

例如：

在 Home 组件中点击菜单按钮 -> 侧边栏显示
当我导航到商家组件并单击菜单按钮时 -> 侧边栏不显示
我在 Merchant 中刷新页面并点击菜单按钮 -> 侧边栏显示

这是我的代码：

BaseLayout.vue

<template>
  <ion-page>
    <customer-header  :pageTitle="pageTitle" :page-default-back-link="pageDefaultBackLink"></customer-header>
    <ion-content>
      <slot />
    </ion-content>
    <customer-footer v-show="showMenu()"></customer-footer>
  </ion-page>
</template>

CustomerHeader.vue

<template>
  <div>
    <ion-toolbar>
      <ion-buttons slot="start" :class="pageTitle != 'Home' ? 'w-100' : ''" >
        <ion-back-button :default-href="pageDefaultBackLink"> </ion-back-button>
        <ion-menu-button
          menu="main-menu"
          autoHide="false"
          :class="pageTitle != 'Home' ? 'menu-right' : ''"
        ></ion-menu-button>
      </ion-buttons>
    </ion-toolbar>

    <ion-menu menuId="main-menu"  content-id="main" type="overlay">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item name="mail" slot="start">Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>
  </div>
</template>

非常感谢您，希望您能给我一些时间来帮助我。再次感谢。

【问题讨论】：

标签： vue.js ionic-framework ionic5 vuejs3

【解决方案1】：

我解决了我的问题，我希望这对初学者也有帮助，我在我的 App.vue 文件中看到了我的 ion-router-outlet，所以我犯了一个错误，我复制了它因为我只是按照教程。

您可以将 ion-menu 放在 App.vue 中，然后您可以将菜单按钮放在您想要的任何页面上。祝你好运！

【讨论】：