Ионное меню не отображается

Прежде всего, сейчас я делаю Ionic App + VueJS.

Это мой первый день его использования. Прямо сейчас я сталкиваюсь с ошибкой при использовании ion-menu, которое меню показывает только один раз, когда я перемещаюсь.

Например:

  1. В компоненте "Главная страница" нажмите кнопку меню - ›отображается боковая панель.
  2. Когда я перехожу к компоненту продавца и нажимаю кнопку меню - ›боковая панель не отображается
  3. Я обновляю страницу в 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>

Заранее большое спасибо, надеюсь, вы дадите мне время, чтобы помочь мне. Спасибо еще раз.


person Jonas    schedule 13.12.2020    source источник


Ответы (1)


Я решил свою проблему, надеюсь, кто-то это также будет полезно для новичков, я видел свой ion-router-outlet в моем файле App.vue, поэтому я сделал ошибку, продублировав его, поскольку я просто следую руководству.

Вы можете просто поместить ионное меню в App.vue, а затем поместить кнопку меню на любую страницу, которую хотите. Удачи!

person Jonas    schedule 13.12.2020