Vue.js多级菜单实战教程：从零开始搭建

创作时间:

2025-01-21 18:17:38

作者:

@小白创作中心

Vue.js多级菜单实战教程：从零开始搭建

在现代Web开发中，多级菜单是一个常见的需求，尤其是在企业级应用中。Vue.js作为一款流行的前端框架，提供了强大的组件化开发能力，使得实现复杂菜单结构变得相对简单。本文将带你从零开始，使用Vue.js和Element UI框架搭建一个多级菜单系统。

基础概念

Vue.js组件化开发

Vue.js的核心特性之一就是组件化。组件是可复用的Vue实例，具有独立的模板、逻辑和样式。通过组件的组合和嵌套，可以构建复杂的用户界面。

递归组件

递归组件是指在组件内部调用自身，主要用于处理具有嵌套结构的数据。在菜单系统中，递归组件可以用来实现无限层级的菜单结构。

Element UI菜单组件

Element UI是一个基于Vue.js的UI组件库，提供了丰富的组件，其中el-menu和el-sub-menu组件非常适合用来构建多级菜单。

实战步骤

环境准备

首先，确保你已经安装了Vue.js和Element UI。如果还没有安装，可以通过以下命令进行安装：

npm install vue
npm install element-ui

数据准备

定义菜单数据结构。这里我们使用一个数组来表示菜单项，每个菜单项包含id、title、icon（图标组件名称）和subMenus（子菜单数组）等属性。

const menus = [
  {
    id: 1,
    title: '首页',
    icon: 'el-icon-s-home',
    index: '/',
  },
  {
    id: 2,
    title: '系统管理',
    icon: 'el-icon-setting',
    index: '/system',
    subMenus: [
      {
        id: 21,
        title: '用户管理',
        icon: 'el-icon-user',
        index: '/system/users',
      },
      {
        id: 22,
        title: '角色管理',
        icon: 'el-icon-s-custom',
        index: '/system/roles',
      },
    ],
  },
  {
    id: 3,
    title: '业务管理',
    icon: 'el-icon-suitcase',
    index: '/business',
    subMenus: [
      {
        id: 31,
        title: '订单管理',
        icon: 'el-icon-document',
        index: '/business/orders',
      },
      {
        id: 32,
        title: '库存管理',
        icon: 'el-icon-box',
        index: '/business/inventory',
      },
    ],
  },
];

组件开发

创建一个递归菜单组件SubMenu.vue：

<template>
  <div v-if="menus && menus.length > 0">
    <el-sub-menu
      v-for="menu in menus"
      :key="menu.id"
      :index="menu.index"
    >
      <template #title>
        <el-icon>
          <component :is="menu.iconComponent" />
        </el-icon>
        <span>{{ menu.title }}</span>
      </template>
      <!-- 递归渲染子菜单 -->
      <SubMenu :menus="menu.subMenus" />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  menus: {
    type: Array,
    required: true,
  },
});
</script>

在主菜单组件Menu.vue中使用递归组件：

<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#232323"
    text-color="#fff"
    router
    unique-opened
  >
    <SubMenu :menus="menus" />
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';
import SubMenu from './SubMenu.vue';

const menus = ref([
  // 菜单数据结构
]);
</script>

路由配置

为了实现菜单项的路由跳转，需要在Vue Router中配置相应的路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Users from './views/Users.vue';
import Roles from './views/Roles.vue';
import Orders from './views/Orders.vue';
import Inventory from './views/Inventory.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/system/users',
    name: 'Users',
    component: Users,
  },
  {
    path: '/system/roles',
    name: 'Roles',
    component: Roles,
  },
  {
    path: '/business/orders',
    name: 'Orders',
    component: Orders,
  },
  {
    path: '/business/inventory',
    name: 'Inventory',
    component: Inventory,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

样式优化

为了使菜单看起来更美观，可以添加一些基本的样式：

.el-menu {
  border-right: none;
}

.el-menu-item.is-active {
  background-color: #1f2d3d !important;
}

完整代码展示

将所有代码整合到一个Vue.js项目中，最终的目录结构可能如下：

src/
├── components/
│   ├── Menu.vue
│   └── SubMenu.vue
├── views/
│   ├── Home.vue
│   ├── Users.vue
│   ├── Roles.vue
│   ├── Orders.vue
│   └── Inventory.vue
├── router/
│   └── index.js
├── main.js
└── App.vue

运行项目后，你将看到一个功能完善的多级菜单系统，支持无限层级的菜单嵌套和路由跳转。