如何使用Vue和Element-UI实现多级菜单导航功能

1. 前言

随着Web应用程序的复杂性的增加，多级菜单导航成为了必备的功能。Vue和Element-UI是目前最受欢迎的前端框架之一，本文将介绍如何使用Vue和Element-UI来实现多级菜单导航。

2. Element-UI介绍

Element-UI是一个基于Vue.js 2.0的UI组件库，拥有丰富的组件和样式，适合快速构建Web应用程序。Element-UI的官方文档详细介绍了每个组件的属性和方法，在使用中方便快捷。

3. 实现思路

在使用Element-UI和Vue来实现多级菜单导航功能时，我们需要将菜单数据以JSON格式储存，并使用Vue的组件来将菜单数据显示为多级菜单。当用户点击菜单时，我们还需要使用Vue的路由器来加载相关的组件。

3.1 初始化Vue工程

首先，我们需要使用Vue-CLI来初始化一个Vue工程，该工程包含了Vue、Webpack和其他必需的依赖项。

npm install vue-cli -g

vue init webpack my-project
cd my-project
npm install
npm run dev

运行npm run dev命令，启动Vue开发服务器，并通过 http://localhost:8080 访问网页。

3.2 安装Element-UI

使用npm来安装Element-UI：

npm i element-ui -S

然后，在main.js中引入Element-UI：

import Vue from 'vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3.3 设计多级菜单导航

在menu-data.js中添加以下JSON数据来表示多级菜单：

export default [

  {
    name: 'home',
    title: 'Home'
  },
  {
    name: 'about',
    title: 'About',
    children: [
      {
        name: 'company',
        title: 'Company'
      },
      {
        name: 'team',
        title: 'Team'
      }
    ]
  },
  {
    name: 'blog',
    title: 'Blog',
    children: [
      {
        name: 'technology',
        title: 'Technology',
        children: [
          {
            name: 'javascript',
            title: 'JavaScript'
          },
          {
            name: 'python',
            title: 'Python'
          }
        ]
      },
      {
        name: 'lifestyle',
        title: 'Lifestyle'
      }
    ]
  }
]

在App.vue中添加el-menu组件来显示多级菜单：

<template>

  <div class="app">
    <div class="main-container">
      <el-menu
        :default-openeds="openeds"
        :collapse="collapsed"
        class="menu"
        :unique-opened="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <template v-for="item in menuData">
          <el-submenu v-if="item.children" :index="item.name">
            <template slot="title">
              {{ item.title }}
            </template>
            <template v-for="subItem in item.children">
              <el-menu-item
                :index="subItem.name"
                :key="subItem.name"
              >
                {{ subItem.title }}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="item.name" :key="item.name">
            {{ item.title }}
          </el-menu-item>
        </template>
      </el-menu>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import menuData from './menu-data'
export default {
  data() {
    return {
      menuData,
      openeds: [],
      collapsed: false
    }
  },
  watch: {
    '$route'(to, from) {
      const index = this.openeds.indexOf(to.path)
      if (index === -1) {
        this.openeds = from.matched.map(item => item.path)
      }
    }
  },
  mounted() {
    this.openeds = this.$route.matched.map(item => item.path)
  }
}
</script>

在代码中，我们使用了Vue的el-menu、el-submenu、el-menu-item组件来构造多级菜单。当用户点击菜单时，Vue路由器会加载相关组件到router-view中。

3.4 设计页面

在src/views文件夹中，创建以下Vue组件：

Home.vue

About.vue
Company.vue
Team.vue
Blog.vue
JavaScript.vue
Python.vue
Lifestyle.vue

然后，在router/index.js中定义路由：

import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Company from '../views/Company.vue'
import Team from '../views/Team.vue'
import Blog from '../views/Blog.vue'
import JavaScript from '../views/JavaScript.vue'
import Python from '../views/Python.vue'
import Lifestyle from '../views/Lifestyle.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About,
    children: [
      { path: '', redirect: 'company' },
      { path: 'company', component: Company },
      { path: 'team', component: Team }
    ]
  },
  { path: '/blog', component: Blog,
    children: [
      { path: '', redirect: 'technology' },
      { path: 'technology', component: JavaScript,
        children: [
          { path: '', redirect: 'javascript' },
          { path: 'javascript', component: JavaScript },
          { path: 'python', component: Python }
        ]
      },
      { path: 'lifestyle', component: Lifestyle }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

在代码中，我们定义了8个Vue组件来显示不同页面，并将多级菜单组织成Vue路由的嵌套结构。

4. 总结

使用Vue和Element-UI来实现多级菜单导航非常方便。我们可以将菜单数据以JSON格式储存在menu-data.js文件中，并将其显示为多级菜单组件。当用户点击菜单时，Vue路由器会自动加载相关组件到router-view中。