element-plus-Menu菜單-已綁定菜單的動態刷新問題

背景

如上圖所示：

• 菜單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居然真的選中了！！！喜極而泣！！！

於是按照這個思路對嵌套菜單進行循環修改，解決了已綁定菜單的動態刷新問題。

結論

實現已綁定菜單的動態刷新，只能改變具體菜單項的值，例如index（url），不能改變菜單的引用值。