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

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