一、?<el-menu>: 菜單組件，定義了側邊欄內部的具體導航項、層級結構和交互行為。
<el-container><!-- 側邊欄容器 --><el-aside width="200px"><!-- 菜單內容 --><el-menu default-active="1" class="el-menu-vertical-demo"><el-menu-item index="1"><i class="el-icon-menu"></i><span slot="title">導航一</span></el-menu-item><el-submenu index="2"><template slot="title"><i class="el-icon-location"></i><span>導航二</span></template><el-menu-item index="2-1">選項1</el-menu-item><el-menu-item index="2-2">選項2</el-menu-item></el-submenu></el-menu></el-aside><el-main>主內容區</el-main>
</el-container>二、?<el-aside>?詳解
<el-aside> 是布局系統的一部分，用于定義側邊欄區域。
- 作用:?提供一個固定寬度（或百分比）的垂直區域，通常放置導航菜單。
- 關鍵屬性:
width:?核心屬性，設置側邊欄的寬度。可以是固定值 (200px) 或百分比 (20%)。這是控制側邊欄大小的主要方式。
- 與?
<el-menu>?的關系:?<el-aside>?只負責“這塊區域有多大”，具體的菜單樣式和行為由?<el-menu>?控制。你可以給?<el-menu>?添加?height: 100%?來讓它填滿?<el-aside>?的高度。
三、?<el-menu>?詳解 (側邊欄的核心)
<el-menu> 是構建側邊欄功能的絕對核心。它非常強大，支持多種模式和豐富的配置。
1. 基本結構
<el-menu>:?根菜單容器。<el-menu-item>:?單個菜單項，代表一個可點擊的導航鏈接。<el-submenu>:?子菜單容器，用于創建可展開/折疊的二級（或更多級）菜單。
2. 關鍵屬性
| 屬性 | 類型 | 說明 | 重要性 |
|---|---|---|---|
mode | string | 菜單展示模式。horizontal?(水平) /?vertical?(垂直) /?popmenu?(彈出菜單，常用于移動端)。側邊欄必須設置為?vertical。 | ????? |
default-active | string | 當前激活菜單的?index。用于高亮顯示當前頁面對應的菜單項。通常與 Vue Router 的?$route.path?或?route.meta.activeMenu?結合使用。 | ????? |
unique-opened | boolean | 在?mode="vertical"?時是否只保持一個子菜單展開。true?表示手風琴效果，一次只展開一個。 | ???? |
menu-trigger | string | 子菜單打開的觸發方式，僅在?mode="horizontal"?時有效。hover?/?click。 | ? |
collapse | boolean | 是否水平折疊收起菜單（僅在?mode="vertical"?時可用）。true?時菜單收起為圖標。這是實現“收起/展開”側邊欄功能的關鍵。 | ????? |
collapse-transition | boolean | 是否開啟折疊動畫。 | ?? |
background-color | string | 菜單的背景色。 | ?? |
text-color | string | 菜單的文字顏色。 | ?? |
active-text-color | string | 當前激活菜單的文字顏色。 | ??? |
3.?<el-menu-item>?和?<el-submenu>?屬性
| 屬性 | 類型 | 說明 |
|---|---|---|
index | string | 唯一標識符。對于?<el-menu-item>，點擊后會觸發?select?事件并傳遞此?index。對于?<el-submenu>，是其唯一標識，用于控制展開/收起和?unique-opened?邏輯。必須全局唯一。 |
route | object?|?string | Vue Router 的?route?對象或字符串。如果提供了此屬性，當點擊?<el-menu-item>?時，會觸發?router.push?進行導航。這是實現菜單與路由聯動的便捷方式。 |
disabled | boolean | 是否禁用。 |
4. 插槽 (Slots)
<el-menu-item>?的?title?插槽:?用于自定義菜單項的標題內容（通常包含圖標和文字）。<el-menu-item index="1"><i class="el-icon-document"></i><span slot="title">處理中心</span> </el-menu-item><el-submenu>?的?title?插槽 (通過?template):?用于自定義子菜單的標題內容。<el-submenu index="2"><template slot="title"><i class="el-icon-location"></i><span>導航二</span></template><!-- 子菜單項 --> </el-submenu>
5. 事件 (Events)
select: 當菜單項被選中時觸發。回調參數為?(index, indexPath)，其中?indexPath?是從根節點到當前節點的?index?路徑數組。這是實現菜單點擊邏輯（如路由跳轉、狀態更新）的主要事件。open: 當子菜單打開時觸發。回調參數為?(index, indexPath)。close: 當子菜單關閉時觸發。回調參數為?(index, indexPath)。
四、 實現高級功能
1. 與 Vue Router 深度集成
這是最常見的需求。目標是：點擊菜單項跳轉路由，且當前頁面對應的菜單項自動高亮。
<template><el-menu:default-active="$route.path" <!-- 關鍵1：綁定當前路由 -->mode="vertical"@select="handleSelect" <!-- 監聽 select 事件 -->><el-menu-item index="/home"><i class="el-icon-menu"></i><span slot="title">首頁</span></el-menu-item><el-menu-item index="/user"><i class="el-icon-user"></i><span slot="title">用戶管理</span></el-menu-item><!-- 或者使用 route 屬性 (更簡潔) --><!-- <el-menu-item index="/order" :route="{ path: '/order' }"> --><!-- <i class="el-icon-tickets"></i> --><!-- <span slot="title">訂單管理</span> --><!-- </el-menu-item> --></el-menu>
</template><script>
export default {watch: {// 關鍵2：監聽路由變化，更新 default-active// 因為 default-active 是 prop，直接修改 $route.path 不會自動更新// 所以通常不需要額外 watch，只要 :default-active 綁定到 $route.path 就行了// 但如果菜單 index 和路由 path 不完全一致，就需要在這里處理映射'$route'(to) {// this.activeIndex = this.getMenuIndexByRoute(to); // 自定義映射邏輯}},methods: {handleSelect(index, indexPath) {// 關鍵3：處理點擊// 如果沒有使用 :route，需要手動跳轉if (index !== this.$route.path) {this.$router.push(index);}}}
}
</script>2. 實現“收起/展開”側邊欄
利用 <el-menu> 的 collapse 屬性。
<template><div><!-- 收起/展開按鈕 --><el-button @click="toggleCollapse">切換</el-button><el-aside :width="isCollapse ? '65px' : '200px'"> <!-- 動態改變 aside 寬度 --><el-menu:collapse="isCollapse" <!-- 綁定 collapse 狀態 -->:collapse-transition="false" <!-- 可選：關閉動畫更流暢 -->:default-active="$route.path"mode="vertical"><el-menu-item index="/home"><i class="el-icon-menu"></i><!-- 收起時只顯示圖標，展開時顯示圖標和文字 --><span slot="title" v-if="!isCollapse">首頁</span></el-menu-item><!-- 其他菜單項... --></el-menu></el-aside></div>
</template><script>
export default {data() {return {isCollapse: false // 控制收起狀態};},methods: {toggleCollapse() {this.isCollapse = !this.isCollapse;}}
}
</script>3. 動態生成菜單 (基于數據)
從后端獲取菜單數據，然后用 v-for 動態渲染。
<template><el-menu :default-active="activeIndex" mode="vertical"><template v-for="item in menuData"><el-menu-item v-if="!item.children" :key="item.index" :index="item.index":route="item.route"><i :class="item.icon"></i><span slot="title">{{ item.title }}</span></el-menu-item><el-submenu v-else :key="item.index" :index="item.index"><template slot="title"><i :class="item.icon"></i><span>{{ item.title }}</span></template><el-menu-item v-for="child in item.children" :key="child.index" :index="child.index":route="child.route">{{ child.title }}</el-menu-item></el-submenu></template></el-menu>
</template><script>
export default {data() {return {activeIndex: '/home',menuData: [{index: '1',title: '首頁',icon: 'el-icon-menu',route: { path: '/home' }},{index: '2',title: '用戶管理',icon: 'el-icon-user',children: [{ index: '2-1', title: '用戶列表', route: { path: '/user/list' } },{ index: '2-2', title: '用戶詳情', route: { path: '/user/detail' } }]}]};}
}
</script>4. 自定義主題
通過 background-color, text-color, active-text-color 屬性或覆蓋 CSS 變量來自定義側邊欄顏色。
<el-menubackground-color="#545c64"text-color="#fff"active-text-color="#ffd04b"...
><!-- 菜單項 -->
</el-menu>或者通過 CSS 變量（如果 Element UI 版本支持）：
/* 全局覆蓋 */
.el-menu {--el-menu-bg-color: #545c64;--el-menu-text-color: #fff;--el-menu-active-color: #ffd04b;
}五、 最佳實踐與注意事項
index?唯一性:?確保所有?<el-menu-item>?和?<el-submenu>?的?index?值在整個菜單樹中是唯一的，否則?default-active?和?unique-opened?可能會出錯。- 路由聯動:?優先使用?
<el-menu-item>?的?route?屬性來實現路由跳轉，代碼更簡潔。如果邏輯復雜，再使用?@select?事件。 - 高亮精準:?
default-active?的值必須與?$route.path?完全匹配才能高亮。注意路由的?path?是否包含參數或是否是嵌套路由。必要時進行映射。 - 性能:?對于非常深或非常寬的菜單，考慮虛擬滾動或懶加載，但 Element UI 默認的?
<el-menu>?對于一般后臺系統性能足夠。 - 無障礙:?確保菜單項有清晰的文本標簽（
<span slot="title">），方便屏幕閱讀器識別。 - 響應式:?在移動端，考慮使用?
<el-menu mode="popmenu">?或將側邊欄改為可滑動的抽屜 (<el-drawer>)。
總結
Element UI 的側邊欄通過 <el-aside> 和 <el-menu> 的完美組合，提供了構建現代化后臺導航的強大能力。掌握 <el-menu> 的各種屬性、事件和與 Vue Router 的集成方式，是開發高效、用戶體驗良好的后臺管理系統的關鍵。通過動態數據和收起/展開功能，可以構建出既美觀又實用的側邊欄導航。
![[Vid-LLM] 數據集 | 基準測試](http://pic.xiahunao.cn/[Vid-LLM] 數據集 | 基準測試)
 - /物流與倉儲組件/extended-warehouse-management)
