[筆記] PrimeVue4 利用 PanelMenu 和 TieredMenu 實作 Sidebar

由於 Nuxt3 預設會透過 pages 資料夾的架構,來產生多層路由。因此可搭配 PrimeVue4 的 PanelMenu 和 TieredMenu 兩者,便可將多層狀的選單表示出來。

nuxt-js-logo


內容

為了自動轉換 Nuxt3 所生成的路由結構,會需有:

1. transformRoutesByPath

將 Vue Router 路由列表根據其 path 轉換為無限層級的 PanelMenu 結構

2. sortMenu

排序選單項目,將目錄排在連結前面

3. findAncestorKeys

找出當前路由其所有 parent keys,將其設定為 true

另外可視情況自行定義 iconMap,這樣頁面顯示名稱前就可以有圖示


程式碼

按讚加入粉絲團

延伸閱讀