单击路由器链接时显示或隐藏画布外菜单

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>