当单击router-link时隐藏侧导航覆盖

Question

在我的app .vue ionic app中有如下的侧边栏

我的App.vue中有这段代码用来显示侧边导航

<template>
<IonApp>
<IonSplitPane content-id="main-content">
<ion-menu content-id="main-content"  type="overlay">
<ion-header>
<ion-toolbar >

<ion-grid class="top_header_section">
<ion-row>
<ion-col size="3" offset="2">
<ion-img class="app_logo" :src="require('@/assets/improved_logo.png')"></ion-img>
</ion-col>
<ion-col size="2" offset="2">
<ion-button class="small_button" color="tertiary"><ion-icon :icon="cartOutline"></ion-icon> Sell</ion-button>
</ion-col>
</ion-row>

</ion-grid>

</ion-toolbar>
</ion-header>
<ion-content>

<ion-list class="no_margin_top">
<ion-item button  router-link="/trending">
<ion-icon :icon="flameOutline"></ion-icon>
<ion-label>Trending</ion-label>
</ion-item>
<ion-item  @click="hideMenu" button router-link="/vehicles">
<ion-icon :icon="carSportOutline"></ion-icon>
<ion-label>Vehicles</ion-label>
</ion-item>
<ion-item button router-link="/property">
<ion-icon :icon="businessOutline"></ion-icon>
<ion-label>Property</ion-label>
</ion-item>
<ion-item button router-link="/phones">
<ion-icon :icon="phonePortraitOutline"></ion-icon>
<ion-label>Phones & Tablets</ion-label>
</ion-item>
<ion-item button router-link="/electronics">
<ion-icon :icon="headsetOutline"></ion-icon>
<ion-label>Electronics</ion-label>
</ion-item>
<ion-item button router-link="/homegarden">
<ion-icon :icon="leafOutline"></ion-icon>
<ion-label>Home & Garden</ion-label>
</ion-item>
<ion-item button router-link="/healthbeauty">
<ion-icon :icon="medkitOutline"></ion-icon>
<ion-label>Health & Beauty</ion-label>
</ion-item>
<ion-item button router-link="/fashion">
<ion-icon :icon="colorPaletteOutline"></ion-icon>
<ion-label>Fashion</ion-label>
</ion-item>
<ion-item button router-link="/hobbies">
<ion-icon :icon="americanFootballOutline"></ion-icon>
<ion-label>Hobbies,Art & Sports</ion-label>
</ion-item>
<ion-item button router-link="/cvs">
<ion-icon :icon="documentTextOutline"></ion-icon>
<ion-label>Seeking Work CVs</ion-label>
</ion-item>
<ion-item button router-link="/services">
<ion-icon :icon="listOutline"></ion-icon>
<ion-label>Services</ion-label>
</ion-item>
<ion-item button router-link="/jobs">
<ion-icon :icon="documentAttachOutline"></ion-icon>
<ion-label>Jobs</ion-label>
</ion-item>
<ion-item button router-link="/babies">
<ion-icon :icon="happyOutline"></ion-icon>
<ion-label>Babies & Kids</ion-label>
</ion-item>
<ion-item button router-link="/animals">
<ion-icon :icon="fishOutline"></ion-icon>
<ion-label>Animals & Pets</ion-label>
</ion-item>
<ion-item button router-link="/agriculture">
<ion-icon :icon="fastFoodOutline"></ion-icon>
<ion-label>Agriculture & Food</ion-label>
</ion-item>
<ion-item button router-link="/equipment">
<ion-icon :icon="constructOutline"></ion-icon>
<ion-label>Equipment & Tools</ion-label>
</ion-item>
<ion-item button router-link="/repair">
<ion-icon :icon="extensionPuzzleOutline"></ion-icon>
<ion-label>Repair & Construction</ion-label>
</ion-item>
<ion-item button router-link="/businesses">
<ion-icon :icon="cashOutline"></ion-icon>
<ion-label>Businesses On Sale</ion-label>
</ion-item>
<ion-item button router-link="/hotels">
<ion-icon :icon="bedOutline"></ion-icon>
<ion-label>Hotel & Accomondation</ion-label>
</ion-item>
<ion-item class="no_big_space_bottom" lines="none" button router-link="/logout">
<ion-icon :icon="powerOutline"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-list>
</ion-content>
<ion-footer  class="bottom_footer_section">
<ion-toolbar class="">
<ion-grid class="">
<ion-row>
<ion-col>
<ion-title class="ion-text-center">All Rights Reserved.</ion-title>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>


</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</IonSplitPane>
</IonApp>
</template>

如何隐藏整个sidenav当这个链接被点击

<ion-item button  router-link="/trending">
<ion-icon :icon="flameOutline"></ion-icon>
<ion-label>Trending</ion-label>
</ion-item>

Answer 1

我可以像这样隐藏侧边导航

<ion-menu-toggle>
<ion-item  button router-link="/vehicles">
<ion-icon :icon="carSportOutline"></ion-icon>
<ion-label>Vehicles</ion-label>
</ion-item>
</ion-menu-toggle>