如何利用vue和Element-plus实现多级菜单和导航栏

1. 简介

Vue.js是当下最流行的前端JavaScript框架之一，它的出现为我们提供了极好的构建用户界面的方式，Element Plus 是一个桌面端的组件库，是饿了么前端团队常年累月的积累和沉淀，是一套基于 Vue 3.0 的桌面端组件库，在原有 Element UI 的基础上对组件库进行了全面的优化和升级。在这篇文章中，我们将介绍如何利用Vue.js和Element Plus实现多级菜单和导航栏的实现。

2. Element Plus 简介

Element Plus 是一款由饿了么内部前端团队开发的Vue 3.0的基础组件库，它主要提供了一系列强大的、美观的桌面端UI组件。使用 Element Plus 您可以快速地搭建各种基于 Vue 3.0 的 Web 应用。与其前代版本Element UI相比，Element Plus进行了全面的优化和升级，包含更多的组件、更优雅的风格、更好的性能、更好的支持 Vue 3.0等等。如果您在开发Web应用程序时，需要一款功能强大，通用性高的组件框架，那么Element Plus 会是一个非常好的选择。

3. 多级菜单实现

3.1 安装Element Plus和Vue-Router

在使用 Element Plus和Vue-Router 前，需要先进行安装。在项目根目录中使用以下命令进行安装：

npm install element-plus vue-router --save

3.2 配置路由

在 Vue 应用程序中，我们通常使用路由来实现页面跳转。在使用 Element Plus 的多级菜单时，我们需要借助 Vue-Router 才能完美的实现。我们可以通过引入 Vue-Router 库来使用路由功能。

在创建 Vue 项目时，就已经集成了 Vue-Router 库。我们现在需要在router目录下创建一个index.js文件用于配置路由。在该文件中，我们需要使用 Vue-Router 的Router方法来进行路由的配置。完整代码如下：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';
import Service from '../views/Service.vue';
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  },
  {
    path: '/service',
    name: 'Service',
    component: Service
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

3.3 创建多级菜单

在创建多级菜单时，我们可以使用Element Plus中的Menu和MenuItem组件。Menu组件是Element Plus中用于创建菜单的容器，而MenuItem组件是用于定义菜单项的组件。我们可以使用<el-menu>和<el-menu-item>标签来创建菜单和菜单项。

下面是一个简单的示例：

<template>
  <div>
    <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="false">
      <el-menu-item index="1">
        <i class="el-icon-menu">
        <span slot="title">一级菜单</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu">
          <span slot="title">二级菜单</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-menu-item index="2-4">选项4</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-5">
          <template slot="title">三级菜单</template>
          <el-menu-item index="2-5-1">选项1</el-menu-item>
          <el-menu-item index="2-5-2">选项2</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </div>
</template>

3.4 实现菜单点击路由跳转

在使用 Element Plus 的菜单时，我们通常需要通过路由实现菜单的点击跳转。在 Vue 应用程序中，我们可以使用 Vue-Router 库来实现路由跳转。

在Vue中，可以使用Router-Link组件实现路由跳转。对于使用菜单跳转时，我们可以在<el-menu-item>中使用<router-link>标签代替<a>标签。当我们点击菜单项时，会自动触发路由跳转。

下面是一个示例：

<template>
  <div>
    <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="false">
      <el-menu-item index="1" :route="{name: 'Home'}">
        <i class="el-icon-menu">
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">多级菜单</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item :route="{name: 'About'}" index="2-1">公司简介</el-menu-item>
          <el-menu-item :route="{name: 'Contact'}" index="2-2">联系我们</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item :route="{name: 'Service'}" index="2-3">服务</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'MenuExample',
};
</script>

4. 导航栏实现

4.1 创建导航栏

在 Element Plus 中，可以使用 <el-header> 标签来创建顶部导航栏。在导航栏中，我们通常需要包含logo，以及菜单等内容。我们可以将<el-menu>组件放在<el-header>组件中，以实现导航栏中的菜单功能。

下面是一个简单的示例：

<template>
  <div>
    <el-header class="header">
      <div class="logo">
        <a href="/">
        </a>
        <span class="title">公司名字</span>
      </div>
      <el-menu mode="horizontal" class="nav-menu" background-color="#ffffff" active-text-color="#409EFF" text-color="#606266">
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">菜单一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">菜单二</el-menu-item>
      </el-menu>
    </el-header>
  </div>
</template>

4.2 切换菜单和导航栏样式

在使用 Element Plus 的导航栏时，我们可以使用以下属性来控制导航栏的样式：

background-color：背景颜色

active-text-color：选中时文字颜色

text-color：文字颜色

而在菜单部分，我们需要使用以下属性来控制菜单样式：

mode：菜单的模式，支持水平和垂直模式，默认为垂直模式

background-color：背景颜色

active-text-color：选中时文字颜色

text-color：文字颜色

下面是一个示例：

<template>
  <div>
    <el-header :style="navStyle" class="header">
      <div class="logo">
        <a href="/">
        </a>
        <span class="title">公司名字</span>
      </div>
      <el-menu mode="horizontal" class="nav-menu" background-color="#ffffff" active-text-color="#409EFF" text-color="#606266">
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">菜单一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">菜单二</el-menu-item>
      </el-menu>
   </el-header>
    <el-container>
      <el-aside width="200px" class="aside" :style="asideStyle">
        <el-menu default-active="1" background-color="#fff" text-color="#333">
          <el-submenu index="1">
            <template slot="title">Vue.js</template>
            <el-menu-item index="1-1">介绍</el-menu-item>
            <el-menu-item index="1-2">安装</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">Element Plus</template>
            <el-menu-item index="2-1">介绍</el-menu-item>
            <el-menu-item index="2-2">安装</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'HeaderExample',
  data() {
    return {
      navStyle: { background: '#fff', borderBottom: '1px solid #ddd' },
      asideStyle: { background: '#f2f2f2', overflowY: 'auto' }
    };
  }
};
</script>

5. 结束语

本文介绍了如何利用 Vue 和 Element Plus 实现多级菜单和导航栏，并演示了如何使用 Vue-Router 进行路由切换。如果您在使用 Element Plus 时遇到了问题，希望本文的内容能够帮到您。