第15课 导航组件菜单与面包屑使用el-menu构建系统侧边导航支持分组与路由联动实现菜单数据化配置动态渲染与图标使用通过route.matched与meta.title自动生成面包屑导航1. el-menu 组件家族1.1 三大成员组件作用关键属性el-menu菜单容器提供路由跳转、展开/折叠、高亮管理router、default-active、default-openedsel-menu-item叶子菜单项可点击跳转index必须与路由路径一致el-sub-menu分组容器点击仅展开/收起不跳转index唯一标识非路由路径1.2 基本结构el-menu:routertrue:default-activeactiveMenuel-menu-itemindex/dashboard首页/el-menu-itemel-menu-itemindex/users用户管理/el-menu-itemel-sub-menuindexsettingstemplate#title系统设置/templateel-menu-itemindex/profile个人中心/el-menu-itemel-menu-itemindex/about关于系统/el-menu-item/el-sub-menu/el-menu关键规则开启router模式后点击叶子菜单自动执行router.push(index)无需手写click。index对于叶子菜单 路由路径必须完全一致对于分组 唯一字符串仅用于组件内部标识。default-active应与当前路由路径保持一致实现选中态联动。2. 菜单与路由联动2.1 高亮跟随路由使用计算属性将route.path动态绑定到default-activeimport{useRoute}fromvue-routerconstrouteuseRoute()constactiveMenucomputed(()route.path)2.2 处理详情页高亮丢失归一化当路径为/users/3时菜单中没有对应的index高亮会消失。解法将子路径归一化到父级菜单路径。constactiveMenucomputed((){constpathroute.pathif(path.startsWith(/users/))return/users// 详情页归属于用户管理returnpath})2.3 刷新后自动展开父分组default-openeds在地址栏直接访问或刷新子页面时默认可能收起父分组导致高亮的子项被隐藏。解法计算当前激活菜单所属的分组将其index放入default-openeds数组。constopenedMenuscomputed((){constgroupmenus.find(itemitem.childrenitem.children.some(childchild.indexactiveMenu.value))returngroup?[group.index]:[]})在el-menu上绑定:default-openedsopenedMenus。3. 菜单数据化配置 (menus.js)将菜单结构抽离为数据便于动态渲染和维护。import{House,User,Setting}fromelement-plus/icons-vueexportconstmenus[{label:首页仪表盘,index:/dashboard,icon:House},{label:用户管理,index:/users,icon:User},{label:系统设置,index:settings,// 分组标识非路由路径icon:Setting,children:[{label:个人中心,index:/profile},{label:关于系统,index:/about}]}]图标处理图标是组件直接存储在数据中。模板中通过component :isitem.icon /动态渲染。模板遍历template v-foritem in menus :keyitem.index el-sub-menu v-ifitem.children :indexitem.index template #title el-icon v-ifitem.iconcomponent :isitem.icon //el-icon span{{ item.label }}/span /template el-menu-item v-forchild in item.children :keychild.index :indexchild.index span{{ child.label }}/span /el-menu-item /el-sub-menu el-menu-item v-else :indexitem.index el-icon v-ifitem.iconcomponent :isitem.icon //el-icon span{{ item.label }}/span /el-menu-item /template4. 面包屑导航 (el-breadcrumb)面包屑显示当前页面的层级链帮助用户了解当前位置并可快速返回。4.1 给路由配置标题 (meta.title){path:users,name:users,meta:{title:用户管理},component:UserListView},{path:users/:id,name:user-detail,meta:{title:用户详情},component:UserDetailView}4.2 面包屑组件实现 (AppBreadcrumb.vue)核心是利用route.matched获取当前路由的嵌套层级链再过滤出有meta.title的层。import{computed}fromvueimport{useRoute}fromvue-routerconstrouteuseRoute()constbreadcrumbscomputed((){// 过滤掉没有 meta.title 的层并排除 dashboard 本身以固定首页constchainroute.matched.filter(itemitem.meta?.titleitem.path!/dashboard)return[{title:首页,path:/dashboard},...chain]})模板渲染el-breadcrumb separator/ el-breadcrumb-item v-for(item, index) in breadcrumbs :keyitem.path :toindex breadcrumbs.length - 1 ? undefined : { path: item.path } {{ item.title }} /el-breadcrumb-item /el-breadcrumb最后一项当前页不可点击:to设为undefined前面的项可点击跳转5. 常见问题排查现象原因解决办法点击菜单能选中但不跳转未开启router模式添加:routertrue菜单高亮不跟随路由default-active未动态绑定或写死使用:default-activeactiveMenuactiveMenu 为 computed详情页高亮消失路径/users/3在菜单中无对应 index计算属性内将匹配前缀的路径归一化到父级刷新页面后子菜单所在分组仍收起未配置default-openeds绑定计算属性返回当前激活菜单所属的分组 index 数组菜单项无图标未安装element-plus/icons-vue或数据中未配置 icon安装图标包并在 menus 中引入图标组件图标不显示忘记用el-icon包裹必须使用el-iconcomponent :is... //el-icon面包屑少一层对应路由未配置meta.title为每个页面路由添加meta: { title: ... }面包屑出现“首页 / 首页”dashboard 路由未被过滤掉过滤条件加上item.path ! /dashboard总结菜单体系el-menu为壳el-menu-item为叶子项el-sub-menu为分组。数据化配置menus.js使得菜单可维护且易扩展。路由联动通过router模式自动跳转通过default-active 计算属性保持高亮通过default-openeds在刷新时展开所在分组。面包屑基于route.matched自动生成层级链依赖路由的meta.title渲染最后一级不可点击。核心规则叶子菜单的index必须与路由路径一致分组的index为任意唯一字符串图标是组件对象而非字符串。