背景

菜单aaaa高亮显示

如上图所示：

• 菜单aaaa：url根据用户权限动态生成，路由形如/a/:b/xxxx,依赖参数b
• 参数 b：点击下图中1，2动态改变的路由参数
  
  切换操作

默认状态：展示菜单aaaa,和当前路由匹配，高亮显示。

需求

点击2切换路由参数,更新菜单里的url,并且菜单aaaa仍应高亮显示。

实现

菜单生成代码：

<el-menu unique-opened :default-active="activeIndex" router>
          <el-menu-item v-for="item in menus" :key="item.url" :index="item.url">     
                {{ item.name }}
          </el-menu-item>
 </el-menu>
cosnt getMenus=(b)=>{
    const wPath = '/a/'+b 
    const menus = [
        { url: wPath + '/xxxx', name: '菜单测试'}
    ]
   return menus 
}

点击2，进行切换，调用getMenus方法重新生成菜单。

运行结果

地址栏的url 变了，但是左侧菜单不高亮了!

菜单不高亮了

menus

有一点点懵逼

地址栏url是对的，menus 变量值也是对的，那么到底哪里出错了呢？

难道是menu菜单渲染问题，没有重新渲染？*

试着给el-menu 加了key,没有重新渲染。

想了想，有没有可能是菜单引用地址变了，所以不会重新渲染（没有看element-plus 的源代码，不知道怎么实现的）？

于是，点击2进行切换的时候直接修改的子项url，没有调用getMenus这个方法。试下：

menus[0].url = '/a/' + b + '/xxxx'

结果，菜单aaaa居然真的选中了！！！喜极而泣！！！

切2菜单选中

结论

实现已绑定菜单的动态刷新，只能改变具体菜单项的值，例如index（url），不能改变菜单的引用值。