我正在将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>