當前位置:菜譜大全網 - 菜譜大全 - vue實現頁面權限中的菜單配置

vue實現頁面權限中的菜單配置

通過壹個數組渲染菜單,實現頁面權限的自動配置。

n級菜單有n-1級菜單構成......以此類推可得:多級菜單就是通過二級菜單循環構成。在element-ui中找到 NavMenu 導航菜單 組件,使用該組件做壹個二級菜單的循環體組件。菜單數據存儲在vuex中。

在組件中判斷是否有子集來加載不同的模塊。二級菜單內部通過插槽來加載循環生成的壹級組件數組,如下 list-item 組件

index屬性可以用菜單對象中的任意屬性代替只需要它是唯壹的

從後臺獲取不同角色的不同菜單數據,再通過兩個遞歸函數來渲染菜單和動態添加菜單路由,實現頁面的權限配置。

/erpang123/router-demo