在vue项目中，结合elementui的el-menu组件和vue router，动态绑定侧边栏菜单与路由是一个常见需求。本文将详细阐述如何实现这一功能。
关键在于将路由配置数据与el-menu组件的数据进行关联。 首先，需要一个包含路由信息的数组（例如navData），其结构需与el-menu组件的嵌套结构匹配。 虽然可以直接从this.$router.options.routes获取路由配置，但通常需要预处理以符合el-menu的数据格式要求。
以下代码片段展示了如何使用el-menu渲染路由并实现绑定：
{{ item.name }} !child.hidden)" :key="child.path" :index="child.path"> {{ child.name }} {{ item.name }}
这段代码利用v-for遍历navData数组。 每个数组元素代表一个菜单项或子菜单。 el-submenu渲染子菜单，el-menu-item渲染菜单项。 :index属性用于唯一标识，:key属性优化渲染性能。 filter方法过滤掉hidden: true的路由项，避免在侧边栏显示。 child.path作为index属性，实现了与路由的绑定。 :default-active="$route.path" 使得当前激活的菜单项与当前路由匹配。
navData需要在组件的data中定义，并赋值为处理后的路由配置数据：
立即学习“前端免费学习笔记（深入）”；
data() { return { navData: this.formatRoutes(this.$router.options.routes) };},methods: { formatRoutes(routes) { // 此处进行路由数据格式化，根据实际需求调整 return routes.map(route => ({ ...route, children: route.children ? this.formatRoutes(route.children) : [] })); }}
formatRoutes 函数用于处理原始路由数据，使其更适合 el-menu 的数据结构。 你可能需要根据你的路由配置进行调整。
示例路由数据结构：
{ path: '/', code: 'AA', name: 'AA菜单', component: Home, hidden: false, children: [ { path: '/list', name: '列表1', code: 'list', hidden: false, component: () => import('@/views/AA/list') } ]}
通过以上步骤，即可实现ElementUI侧边栏与路由的动态绑定，菜单项会根据路由变化而动态显示。 点击菜单项将触发路由跳转。 记住根据你的实际路由结构调整代码。
以上就是Vue项目中如何动态绑定ElementUI侧边栏菜单与路由？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561861.html
微信扫一扫 
支付宝扫一扫 
