Vue3项目中使用实现菜单导航-工具盒子

1. Element plus组件 {#1.-element-plus%E7%BB%84%E4%BB%B6}

使用Element plus的Menu 菜单和Container 布局容器。 https://element-plus.org/zh-CN/component/menu.html https://element-plus.org/zh-CN/component/container.html

2. 页面布局 {#2.-%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80}

页面布局如下，点击侧边栏的菜单，在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. 菜单栏的页面路径 {#3.-%E8%8F%9C%E5%8D%95%E6%A0%8F%E7%9A%84%E9%A1%B5%E9%9D%A2%E8%B7%AF%E5%BE%84}

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

3.1 页面路由 {#3.1-%E9%A1%B5%E9%9D%A2%E8%B7%AF%E7%94%B1}

使用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: () =&gt; import('../views/AddEvent.vue'),
meta: {title: '添加事件', show: true}
},
{
path: '/eventList',
name: 'EventList',
component: () =&gt; import('../views/EventList.vue'),
meta: {title: '事件列表', show: true}
},
{
path: '/eventHistory',
name: 'EventHistory',
component: () =&gt; import('../views/EventHistory.vue'),
meta: {title: '执行历史', show: true}
}
]
})
export default router

3.2 页面 {#3.2-%E9%A1%B5%E9%9D%A2}

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

<template>
  <div class="addEvent">
    <h1>This is an AddEvent page</h1>
  </div>
</template>
&lt;script&gt;
export default {
name: 'addEvent'
}
&lt;/script&gt;
&lt;style&gt; &lt;/style&gt;

3.3 获取页面路由对象 {#3.3-%E8%8E%B7%E5%8F%96%E9%A1%B5%E9%9D%A2%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1}

先获取路由实例（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(() =&amp;gt; {
  return router.getRoutes().filter(route =&amp;gt; route.meta &amp;amp;&amp;amp; route.meta.title &amp;amp;&amp;amp; route.meta.show)
})
return {
routes
}

} } &lt;/script&gt;