Javascript 单击路由器链接时显示或隐藏offcanvas菜单

我有一个vue electron应用程序，其中主菜单模板加载在

app.vue

文件中。我想在单击

时隐藏它。这是一个非画布菜单，因此只有汉堡按钮始终显示在所有组件中，并且只有在单击按钮时才会显示内容。是否有任何有效的解决方案来管理此问题

这是加载到

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>

出口{
方法：{
切换菜单（）{
this.isVisible=！this.isVisible；
}
}
}

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

使用click.native？
对stackoverflow进行了快速搜索，似乎单击路由器链接将触发单击。本机

出口{
方法：{
切换菜单（）{
this.isVisible=！this.isVisible；
}
}
}