带有组件的下拉菜单结构

Question

我有一个使用 Bootstrap Vue 的简单网站，其中包含许多页面，比如说A，B和C页。

主页上有一个<b-navbar-nav>和一个<b-nav-item-dropdown>，用于选择页面A，B或C

MainMenu
|
|-A
|-B
|-C

我希望导航栏上再出现一个下拉菜单，具体取决于您选择的页面。因此，导航栏在A页中看起来像这样

MainMenu     Page A
|            |
|-A          |-A1 
|-B          | A2
|-C          | A3

然后，如果选择了B页

MainMenu     Page B
|            |
|-A          |-B1 
|-B          | B2
|-C          | B3

等等，相当简单的东西

我有一个“ main-menu.vue”组件，其中包含第一个下拉菜单（和导航栏样式），假设我有一个“ page-a-menu.vue”组件（在子文件夹中），我如何“注入” ”进入第二个下拉菜单，以便我可以在需要时换出“ page-b-menu.vue”？理想情况下，我也想要第三级。

最简单，最可维护的方法是什么？