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

Question

I have a vue electron app where the main menu template is loaded inside the App.vue file. I want to hide it when a <router-link> is clicked. It's an offcanvas menu so only the hamburger button is always displayed in all the components and the content will be showed only when the button is clicked. Is there any valid solution to manage this?

This is a sample of the menu markup that is inside the main view loaded inside the App.vue file

<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>

At the moment the offcanvas content will remain on screen also after the router view will change.

Answer 1

use click.native?
Did a quick search on stackoverflow, looks like click on router-link will trigger 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>