离子菜单不适用于Ionic-vuejs中的离子选项卡

时间:2019-12-02 14:26:11

标签: vue.js ionic-framework menu ion

我正在将Ionic与Vue.js结合使用,我有一个问题。 为什么我的菜单不能与离子选项卡一起使用?我的菜单在所有其他页面上都运行良好,并且当我为特定页面添加选项卡时,该页面的菜单不起作用。

我知道,这个问题是“著名的”,但是对于vue.js我找不到答案。

谢谢..

这2个组件是一个链接(组件页面) 菜单:

<template>
<div>
   <ion-menu side="start" type="push">
      <ion-header>
        <ion-toolbar translucent>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item v-on:click="navigate('/')">
            <ion-icon name="home" slot="start"></ion-icon>
            <ion-label>HOME</ion-label>
          </ion-item>
          <ion-item v-on:click="navigate('news')">
            <ion-icon name="home" slot="start"></ion-icon>
            <ion-label>NEWS</ion-label>
          </ion-item>
          <ion-item v-on:click="navigate('about')">
            <ion-icon name="person" slot="start"></ion-icon>
            <ion-label>ABOUT ILO</ion-label>
          </ion-item>
          <ion-item v-on:click="navigate('howtoplay')">
            <ion-icon name="chatbubbles" slot="start"></ion-icon>
            <ion-label>HOW TO PLAY</ion-label>
          </ion-item>
          <ion-item v-on:click="navigate('myaccount')">
            <ion-icon name="settings" slot="start"></ion-icon>
            <ion-label>MY ACCOUNT</ion-label>
          </ion-item>
          <ion-item v-on:click="navigate('contact')">
            <ion-icon name="settings" slot="start"></ion-icon>
            <ion-label>CONTACT</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <div class="ion-page" main>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
    </div>
  <ion-menu-controller></ion-menu-controller>
</div>
</template>

我的标签:

<template>
  <ion-tabs>
    <!-- @IonTabsWillChange="beforeTabChange"
    @IonTabsDidChange="afterTabChange"> -->

    <ion-tab
      tab="home"/>
    <ion-tab
      tab="request"/>

    <template slot="bottom">
      <ion-tab-bar >
        <ion-tab-button tab="profile">
          <ion-icon name="contacts"/>
          <ion-label>Profile</ion-label>
        </ion-tab-button>
        <!-- Provide a custom route to navigate to -->
        <ion-tab-button tab="mysessions">
          <ion-icon name="contacts"/>
          <ion-label>My sessions</ion-label>
          <ion-badge>6</ion-badge>
        </ion-tab-button>
      </ion-tab-bar>
    </template>
  </ion-tabs>
</template>

0 个答案:

没有答案