Vue.js项目中如何将ElementUI侧边栏菜单与路由系统绑定？（侧边.路由.绑定.如何将.菜单.....）

wufei123 2025-03-01 阅读:49 评论:0

本文讲解如何在vue.js项目中，利用elementui构建侧边栏菜单并与vue router路由系统绑定，实现动态菜单导航。关键在于将路由配置信息转换为elementui el-menu组件可识别的结构。我们不会直接使用this.$r...

Vue.js项目中如何将ElementUI侧边栏菜单与路由系统绑定？

本文讲解如何在vue.js项目中，利用elementui构建侧边栏菜单并与vue router路由系统绑定，实现动态菜单导航。关键在于将路由配置信息转换为elementui el-menu组件可识别的结构。

我们不会直接使用this.$router.options.routes作为菜单数据源，而是需要对其进行处理，提取所需字段，构建一个名为navData的数据数组。此数组的结构需与el-menu组件的嵌套结构一致。

navData数组中的每个元素包含name（菜单名称）和children（子菜单）属性。children属性也是一个数组，包含子菜单项信息，包括path（路由路径）属性，用于路由绑定。hidden属性控制菜单项的显示与隐藏。

以下代码片段演示如何使用v-for循环遍历navData，动态生成el-submenu和el-menu-item组件。el-menu-item的index属性设置为子菜单的path，使el-menu能根据路由变化自动选中菜单项。

PHP

<el-menu ...>
  <template v-for="(item, index) in navData">
    <el-submenu :index="index + ''" :key="index">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item 
        v-for="child in item.children.filter(fil => !fil.hidden)" 
        :index="child.path" 
        :key="child.path">
        {{ child.name }}
      </el-menu-item>
    </el-submenu>
  </template>
</el-menu>

navData需在组件的data中定义并赋值。虽然可以直接赋值this.navData = this.$router.options.routes，但实际应用中通常需要过滤和处理this.$router.options.routes，只保留侧边栏显示的路由信息，并转换为navData的结构。

以下是一个示例路由数据结构：

PHP

{
  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)
    }
  ]
}