bug: Vue IonMenu in nested navigation

[scottix]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
Initializing a menu inside a nested route breaks the first menu and the button disappears in the first page

Expected behavior:
Should have both menus working

Steps to reproduce:

Code to have menus in nested router

https://github.com/scottix/vue-pretab

1. Click Menu button
2. Navigate to tabs
3. Click Menu button
4. Click back button

Related code:

https://github.com/scottix/vue-pretab

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.11.8-testing.0 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.0-dev.202010131537.cf15fc2

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.2.1) : 0.2.5

System:

   NodeJS : v12.19.0 (/usr/bin/node)
   npm    : 6.14.8
   OS     : Linux 5.4

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #18683. The issue is not Vue-specific, but is a bug in our underlying ion-menu component.

That being said, this paradigm is not really something we recommend. Multiple menus that display different content can result in a confusing user experience. We recommend one top level ion-menu inside of an ion-split-pane. See the ion-split-pane Documentation for examples.

If you are interested in seeing #18683 fixed I recommend commenting on that thread with your use case. Concrete use cases that include the problem developers are trying to solve help us better prioritize bug fixes. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.