Vue2和ElementUI编写的无限级菜单路由

Vue2和ElementUI编写的无限级菜单路由

文章转载自：www.javaman.cn

<template>
  <div>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse" router>
      <template v-for="item in menuList">
        <el-submenu v-if="item.children" :index="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <template v-for="child in item.children">
            <el-menu-item :index="child.path">{{ child.name }}</el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.path">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false, // 是否折叠菜单
      menuList: [
        {
          name: '首页',
          path: '/',
          icon: 'el-icon-s-home'
        },
        {
          name: '菜单1',
          path: '/menu1',
          icon: 'el-icon-menu',
          children: [
            {
              name: '菜单1-1',
              path: '/menu1-1'
            },
            {
              name: '菜单1-2',
              path: '/menu1-2'
            }
          ]
        },
        {
          name: '菜单2',
          path: '/menu2',
          icon: 'el-icon-menu',
          children: [
            {
              name: '菜单2-1',
              path: '/menu2-1'
            },
            {
              name: '菜单2-2',
              path: '/menu2-2',
              children: [
                {
                  name: '菜单2-2-1',
                  path: '/menu2-2-1'
                },
                {
                  name: '菜单2-2-2',
                  path: '/menu2-2-2'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

复制

在这个例子中，我们使用了el-menu和el-submenu组件来实现无限级菜单。menuList数组中存储了菜单的数据，包括菜单的名称、路径和图标等信息。如果一个菜单有子菜单，我们使用el-submenu组件来展示它的子菜单，否则使用el-menu-item组件来展示它本身。我们还使用了Vue Router来实现路由跳转。

在实际项目中，我们可以将菜单数据存储在后端数据库中，通过API来获取菜单数据，并动态生成菜单。这样可以更加灵活地管理菜单，同时也方便后续的维护和扩展。