优雅整合element ui侧边栏和vue router
在基于Element UI和Vue Router构建的应用中，高效关联侧边栏菜单和路由至关重要，这能实现菜单动态显示和页面跳转。本文将详细讲解如何优雅地集成Element UI侧边栏与Vue Router，点击侧边栏菜单即可跳转到对应路由。
关键在于利用Vue Router的路由信息和Element UI的菜单组件。我们需要动态渲染侧边栏菜单项，并根据路由配置设置菜单属性。
以下代码片段演示了实现方法：
{{ item.name }} {{ child.name }}
这段代码使用 v-for 循环遍历 navData 数组，该数组包含所有需要显示的菜单项信息。el-submenu 组件创建子菜单，el-menu-item 创建菜单项。index 属性唯一标识菜单项，:index="child.path" 将菜单项索引设置为对应的路由路径，确保点击跳转正确。filter(child => !child.hidden) 过滤掉 hidden: true 的菜单项，实现菜单的显示/隐藏控制。
立即学习“前端免费学习笔记（深入）”；
为了使代码正常工作，需要将路由配置数据赋值给 navData：
this.navData = this.$router.options.routes;
注意，路由数据需要特定结构，例如：
{
path: '/',
code: 'AA',
name: 'AA菜单',
component: Home,
hidden: false,
children: [
{
path: '/list',
name: '列表1',
code: 'list',
hidden: false,
component: resolve => require(['@/views/AA/list'], resolve)
}
]
}
在这个 JSON 结构中，path 表示路由路径，name 表示菜单名称，component 表示对应组件，hidden 控制菜单显示，children 定义子菜单。 通过这种方式，即可实现Element UI侧边栏和Vue Router的完美结合。
