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

【问题标题】：Show or hide offcanvas menu when router link is clicked单击路由器链接时显示或隐藏画布菜单
【发布时间】：2021-04-03 11:15:35
【问题描述】：

我有一个 vue 电子应用程序，其中主菜单模板加载到 App.vue 文件中。我想在单击 <router-link> 时隐藏它。它是一个画布菜单，因此所有组件中始终只显示汉堡包按钮，并且只有在单击按钮时才会显示内容。有没有有效的解决方案来管理这个？

这是在 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>

此时，在路由器视图更改后，画布外的内容也会保留在屏幕上。

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：