Vue renders different menus when switching pages

The structure of

App.vue is as follows
< div id= "app" >

<Header />
<Menu />
<div>
    <router-view/>
</div>

< / div >

structure of Header.vue

<li><router-link to="/a">a</router-link></li>
<li><router-link to="/b">b</router-link></li>

< / div >

structure of Menu.vue

<!-- aa -->
<ul>
    <li>a1</li>
    <li>a2</li>
</ul>
<!-- ba -->
<ul>
    <li>b1</li>
    <li>b2</li>
</ul>

< / div >

want to click header navigation, jump to different pages, page a shows menu a, page b shows menu b. Could you tell me how to solve this problem?

Oct.12,2021

when you detect a change in the route on the navigation page
make a conditional decision to change the menu

<div>

<li><router-link to="/a" active-class="active" exact>a</router-link></li>
<li><router-link to="/b" active-class="active">b</router-link></li>
</div>

you can add css
exact for him to show

by default.
Menu