vue切换页面的时候渲染不同的菜单

Question

App.vue的结构如下
<div id="app">

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

</div>

Header.vue的结构
<div>

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

</div>

Menu.vue的结构
<div>

<!-- 页面a显示页面a的菜单 -->
<ul>
    <li>页面a的菜单1</li>
    <li>页面a的菜单2</li>
</ul>
<!-- 页面b显示页面a的菜单 -->
<ul>
    <li>页面b的菜单1</li>
    <li>页面b的菜单2</li>
</ul>

</div>

想实现点击header导航，跳转到不同页面，页面a显示菜单a，页面b显示菜单b。请问这种怎么解决呢？

Answer 1

当你导航页检测路由的变化
进行条件判断来改变菜单

Answer 2

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

可以为他加上css
exact 代表默认显示