vue3 element-plus导航栏

### 如何在 Vue3 中使用 Element Plus 创建导航栏 为了创建基于 Vue3 的导航栏，需先确保项目已安装 `ElementPlus` 并配置好 `Vue Router`[^1]。 #### 安装依赖库 ```bash npm install element-plus npm install vue-router ``` #### 设置路由文件 (router/index.js) 定义简单的页面路径映射关系来支持导航跳转功能。 ```javascript import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') } ] export default createRouter({ history: createWebHistory(), routes, }) ``` #### 实现顶部导航栏组件 (`components/HeaderNav.vue`) 此部分展示了如何利用 `el-menu`, `el-submenu`, 及 `el-menu-item` 组件构建响应式的水平菜单结构，并通过绑定动态类名控制子项高亮效果[^2]。 ```html <template> <div class="header-nav"> <el-menu mode="horizontal" router> <!-- 主菜单 --> <el-menu-item index="/">首页</el-menu-item> <el-submenu v-for="(submenu, index) in menuList" :key="index" :index="'sub' + index"> <template slot="title">{{ submenu.title }}</template> <!-- 子菜单列表 --> <el-menu-item v-for="(item,i) in submenu.children" :key="i" :index="item.path" :class="currentActiveIndex===`${index}-${i}` ? 'activeSubmenu': 'defaultSubmenu'" > {{ item.name }} </el-menu-item> </el-submenu> </el-menu> </div> </template> <script setup lang="ts"> // 假设这里有一个方法用于获取当前激活的索引值 currentActiveIndex let currentActiveIndex = ref('0-0') defineProps<{ menuList: Array<{ title:string; children:Array<{name:string,path:string}> }> }>() </script> <style scoped> .activeSubmenu { background-color: #ecf5ff; } .defaultSubmenu { /* 默认样式 */ } </style> ``` 上述代码片段实现了带有下拉选项卡形式的多级导航条目展示方式；其中每个顶层链接都关联着特定的目标地址或展开内含更多细化分类项目的折叠面板。当用户点击某个具体位置时，会依据实际交互情况自动更新对应的视觉反馈状态以突出显示所选区域。