I'm looking for a solution to disable the mobile menu transitions when changing page routes in my app. Initially, I noticed that the menu would stay open when switching pages. To address this issue, I added a route watcher to automatically "close" the menu when the page route changes. While this solution works, I find it a bit clunky as the menu closes after the page has already changed due to the vue transitions being applied. How can I close the menu without triggering the transitions?
export default {
name: "Menu",
data() {
return {
activeMenu: false,
menuTransition: null
};
},
watch: {
$route() {
this.activeMenu = false;
}
}
};
Here is an example of one of the menu items:
<transition :name="menuTransition">
<ul
class="dropdown-menu"
>
<li>
<router-link to="/page2"
>Page 2</router-link
>
</li>
</ul>
</transition>