前端进阶：Vue、Vue-Router、ElementUI 三剑合璧，打造动态菜单实战

2024-01-05 09:29:43

利用 Vue、Vue-Router 和 ElementUI 打造动态菜单，提升 SPA 体验

随着单页面应用程序 (SPA) 在现代前端开发中的流行，高效管理应用程序中的导航变得至关重要。Vue ，一个轻量级的渐进式 JavaScript 框架，携手其官方路由管理工具 Vue-Router 和基于 Vue 的 UI 组件库 ElementUI ，提供了一种强有力的解决方案，可以轻松创建动态菜单，提升用户体验。

项目搭建

开始之前，我们需要搭建一个 Vue 项目。我们可以利用 Vue CLI 工具：

vue create vue-menu-app

接着，安装 Vue-Router 和 ElementUI：

npm install vue-router element-ui

在 main.js 文件中，配置 Vue-Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'

Vue.use(VueRouter)
Vue.use(ElementUI)

const routes = [
  // ...
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

实现左侧菜单功能

ElementUI 的 el-menu 组件是构建菜单的理想选择。它提供了一系列配置选项，可以满足各种需求。在 App.vue 文件中，我们创建了一个 el-menu 组件：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical">
    <!-- ... -->
  </el-menu>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1'
      }
    }
  }
</script>

我们定义了 activeIndex 数据属性来控制当前激活的菜单项。

接下来，在 data 方法中定义菜单项的数据结构：

data() {
  return {
    menuList: [
      {
        index: '1',
        title: 'Home'
      },
      // ...
    ]
  }
}

最后，使用 v-for 遍历 menuList 数组，创建菜单项：

<el-menu :default-active="activeIndex" class="el-menu-vertical">
    <el-menu-item
      v-for="item in menuList"
      :key="item.index"
      :index="item.index"
      @click="handleMenuClick">
      {{ item.title }}
    </el-menu-item>
  </el-menu>

与 Vue-Router 集成

将菜单与 Vue-Router 集成，需要在 routes 数组中定义路由配置：

const routes = [
  {
    path: '/',
    component: Home,
    meta: { title: 'Home' }
  },
  // ...
]

在 meta 对象中，我们可以指定每个路由的标题。

在 el-menu 组件中，使用 @click 事件监听菜单项点击，并通过路由跳转：

<el-menu-item
  v-for="item in menuList"
  :key="item.index"
  :index="item.index"
  @click="handleMenuClick">
  {{ item.title }}
</el-menu-item>

在 handleMenuClick 方法中，通过 this.$router.push 跳转到对应路由：

handleMenuClick(index) {
  this.activeIndex = index
  this.$router.push({ path: `/${index}` })
}

代码示例：更新菜单状态

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical">
    <el-menu-item
      v-for="item in menuList"
      :key="item.index"
      :index="item.index"
      @click="handleMenuClick">
      {{ item.title }}
    </el-menu-item>
  </el-menu>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        menuList: [
          {
            index: '1',
            title: 'Home'
          },
          // ...
        ]
      }
    },
    methods: {
      handleMenuClick(index) {
        this.activeIndex = index
        this.$router.push({ path: `/${index}` })
      }
    }
  }
</script>

常见问题解答

1. 如何在菜单项中添加图标？

答：可以使用 icon 属性在菜单项中添加图标：

<el-menu-item icon="el-icon-home" index="1">Home</el-menu-item>

2. 如何禁用菜单项？

答：设置 disabled 属性为 true 即可禁用菜单项：

<el-menu-item disabled index="1">Disabled Item</el-menu-item>

3. 如何在点击菜单项时触发自定义事件？

答：可以使用 @click 事件监听菜单项点击，并触发自定义事件：

<el-menu-item @click="handleCustomEvent" index="1">Trigger Custom Event</el-menu-item>

4. 如何在菜单中创建嵌套子菜单？

答：使用 el-submenu 组件创建子菜单，并将其作为 el-menu-item 的子元素：

<el-menu>
  <el-menu-item index="1">Menu Item 1</el-menu-item>
  <el-submenu index="2">
    <template slot="title">Submenu</template>
    <el-menu-item index="2-1">Submenu Item 1</el-menu-item>
    <el-menu-item index="2-2">Submenu Item 2</el-menu-item>
  </el-submenu>
  <el-menu-item index="3">Menu Item 3</el-menu-item>
</el-menu>