ElementUI el-menu导航开启vue-router模式

### Vue3 中 `el-menu` 组件的使用方法 在 Vue3 和 Element Plus (Element UI 的升级版本) 中，`el-menu` 是用于创建导航菜单的重要组件。下面是一个详细的介绍以及如何实现带有子项分组 (`el-menu-item-group`) 并且能够保存选中状态的功能。 #### 基本结构与属性设置 为了使菜单可以响应路由变化并保持当前页面对应的菜单项被激活，需配置 `:default-active` 属性绑定到 `$route.path` 上[^2]： ```html <template> <div id="app"> <!-- 菜单 --> <el-menu default-active="this.$route.path" router mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-submenu index="1"> <template slot="title">我的工作台</template> <el-menu-item-group title="分组一"> <el-menu-item index="/dashboard/home">首页</el-menu-item> <el-menu-item index="/dashboard/article" v-if="hasPermission('article')">文章管理</el-menu-item> </el-menu-item-group> </el-submenu> ... </el-menu> </div> </template> <script setup lang="ts"> import { useRoute } from 'vue-router'; const route = useRoute(); // 权限判断函数 hasPermission 需要自行定义 function hasPermission(permissionName:string):boolean { // 实现权限逻辑... } </script> ``` 上述代码展示了水平模式下的菜单(`mode="horizontal"`), 同时也包含了条件渲染(`v-if`)来控制某些菜单项是否显示, 这对于基于角色或权限展示不同功能非常有用. #### 子项分组 当有多个相似类型的选项时，可以通过 `<el-menu-item-group>` 对它们进行分类整理，这不仅提高了用户体验还让界面更加整洁有序[^1]: ```html <!-- 分组示例 --> <el-menu-item-group title="用户操作"> <el-menu-item index="/user/profile">个人资料</el-menu-item> <el-menu-item index="/user/settings">账户设置</el-menu-item> </el-menu-item-group> ``` 这里通过给定 `title` 参数指定了该小组的名字，在实际应用中可以根据业务需求灵活调整这些参数值。 #### 动态更新默认活动项 为了让菜单始终反映最新的浏览位置，除了初始化时指定外还需要监听路由的变化事件以便及时同步: ```javascript watch( () => $route.path, newPath => { menuInstance.defaultActive = newPath; } ); ``` 这段脚本会监视路径改变并将新的路径赋值给 `defaultActive`, 确保每次切换页面都能正确高亮相应的菜单条目.