單擊路由器鏈接時顯示或隱藏畫布外菜單

Question

我有一個 vue electron 應用程序，其中主菜單模板加載到App.vue文件中。 單擊<router-link>時，我想隱藏它。 這是一個 offcanvas 菜單，因此只有漢堡包按鈕始終顯示在所有組件中，並且只有在單擊按鈕時才會顯示內容。 有沒有有效的解決方案來管理這個？

這是在App.vue文件中加載的主視圖中的菜單標記示例

<template>
<div>
 <nav v-if="isVisible">
  <button @click.prevent="toggleMenu()"><i class="fas fa-bars"></i></button>
  <li><router-link to="/"></router-link></li>
  <li><router-link to="/link-one"></router-link></li>
 </nav>
 <router-view></router-view>
</div> 
</template>

<script>
export {
 methods: {
  toggleMenu() {
   this.isVisible = !this.isVisible;
  }
 }
}
</script>

目前，在路由器視圖更改后，offcanvas 內容也將保留在屏幕上。

Answer 1

使用 click.native？
在 stackoverflow 上快速搜索了一下，看起來點擊 router-link 會觸發 click.native
https://stackoverflow.com/a/52230500/13703967

<template>
<div>
 <nav v-if="isVisible">
  <button @click.prevent="toggleMenu()"><i class="fas fa-bars"></i></button>
  <li><router-link to="/" @click.native="toggleMenu"></router-link></li>
  <li><router-link to="/link-one" @click.native="toggleMenu"></router-link></li>
 </nav>
 <router-view></router-view>
</div> 
</template>

<script>
export {
 methods: {
  toggleMenu() {
   this.isVisible = !this.isVisible;
  }
 }
}
</script>