Vue3项目中使用<el-menu>实现菜单导航

1. Element plus组件

使用Element plus的Menu 菜单和Container 布局容器。

2. 页面布局

页面布局如下，点击侧边栏的菜单，在main区域显示对应的页面内容。

<template>
  <div class="app">
    <el-container>
        <!--header 顶栏容器-->
        <el-header><Header></Header></el-header>
        <el-container>
          <!--aside 侧边栏容器-->
          <el-aside width="200px">
            <el-menu router default-active="1">
              <el-menu-item v-for="route in routes" :key="route.path" :index="route.path">
                {{ route.meta.title }}
              </el-menu-item>
            </el-menu>
          </el-aside>
          <!--main 主要区域容器-->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
        <!--footer 底栏容器-->
        <el-footer><Footer></Footer></el-footer>
      </el-container>
  </div>
</template>

3. 菜单栏的页面路径

从上文（2. 页面布局）可以看出，菜单项是通过for循环渲染出来的，route是从计算属性routes中获取的路由对象，index属性设置为路由的路径。

3.1 页面路由

使用Vue Router来定义菜单页面的路由，包括路径、组件、元信息。其中元信息的show属性是指是否在菜单页显示（非必须）。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // ...
    {
      path: '/addEvent',
      name: 'AddEvent',
      component: () => import('../views/AddEvent.vue'),
      meta: {title: '添加事件', show: true}
    },
    {
      path: '/eventList',
      name: 'EventList',
      component: () => import('../views/EventList.vue'),
      meta: {title: '事件列表', show: true}
    },
    {
      path: '/eventHistory',
      name: 'EventHistory',
      component: () => import('../views/EventHistory.vue'),
      meta: {title: '执行历史', show: true}
    }
  ]
})

export default router

3.2 页面

页面的内容如下（演示使用，内容不重要）。

<template>
  <div class="addEvent">
    <h1>This is an AddEvent page</h1>
  </div>
</template>

<script>

export default {
  name: 'addEvent'
}
</script>

<style>
</style>

3.3 获取页面路由对象

先获取路由实例（3.1 页面路由中定义），然后对路由实例根据元数据的show进行过滤，获取页面路由对象routes。

<script>
import { ElMenu, ElMenuItem } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import Header from '@/views/container/Header.vue'
import Footer from '@/views/container/Footer.vue'

export default {
  name: 'app',
  components: {
    ElMenu,
    ElMenuItem,
    Header,
    Footer
  },
  setup() {
    // 获取路由器实例
    const router = useRouter()
    // 获取当前路由的信息
    const route = useRoute()

    // 计算属性，从路由配置中提取菜单项
    const routes = computed(() => {
      return router.getRoutes().filter(route => route.meta && route.meta.title && route.meta.show)
    })

    return {
      routes
    }
  }
}
</script>

看看效果

以上。