网页顶部的导航栏，一般由代码动态生成

菜单数据在文件内统一配置，方便增删改查，导入后可自动生成导航菜单

代码如下

1.dom部分（简单示例）

<el-menu mode="horizontal" :default-active="currentPath" router
				@select="selectedMenu"
				style="border-bottom: none;width: 1250px;background-color: #073371;height: 80px;">
				<div v-for="(navMenu,index) in menuList" :key="index">
					<el-menu-item v-if="!navMenu.children" :index="navMenu.key">
						{{ navMenu.title }}
					</el-menu-item>
				<el-sub-menu v-if="navMenu.children" :index="index.toString()" class="mu_submenu">
						<template #title>{{navMenu.title}}</template>
					<el-menu-item v-for="subMenu in navMenu.children"                     :index="subMenu.key">
							{{ subMenu.title }}
				</el-menu-item>
		</el-sub-menu>
	</div>
</el-menu>

<script setup>
import {
		ref,
		onMounted,
		computed,
		reactive,
		watch
	} from 'vue'
import {
		useRouter,
		useRoute
	} from 'vue-router'
    let currentPath = ref('')
	onMounted(() => {
		let route = useRoute()
		currentPath.value = route.path
	})

const menuList = ref([
    {
	id: 1,
	title: "page1",
	key: '/path1',
}, {
	id: 2,
	title: "page2",
	children: [{
		id: 3,
		title: "page2-1",
		key: '/path21'
	}, {
		id: 4,
		title: "page2-2",
		key: '/path22'
	}]
}
])

</script>

2.css部分

以下样式分为两个style，没有scope限制的样式用于控制二级菜单弹出层的宽度，因为需要脱离scope限制，如果有多个页面用到可放在父级页面样式中，如App.vue

<style scoped>
	:deep(.el-menu-item),
	:deep(.el-sub-menu__title) {
		background: #073371 !important;
		color: #7EA4DD;
		font-size: 18px;
		font-weight: bold;
		height: 80px;
	}
</style>
<style>
	/* 导航菜单设置样式*/
	.el-menu--collapse .el-menu .el-submenu,
	.el-menu--popup {
		min-width: 100px !important;
		padding: 0 15px !important;
		border: none !important;
		text-align: center !important;
	}
</style>

修改前————>>>修改后

3.菜单高亮（重点选中二级菜单时高亮）

一级菜单实现，可按需求添加背景图

.el-menu .el-menu-item.is-active {
		/* background: url('../assets/other/activemenu.png') 0px 57px !important; */
		/* background-repeat: no-repeat !important; */
		/* background-position: 0 0; */
		background-color: #08336F !important;
		color: aliceblue !important;
	}

 二级菜单实现，通过计算当前导航索引动态添加类

:class="currentActiveIndex==index? 'activeSubmenu':'defaultSubmenu'"

分别为激活和未激活设置不同的样式，提升用户体验

:deep(.el-menu .activeSubmenu .el-sub-menu__title){
	color: aliceblue !important;
	/*background: url('../assets/other/activemenu.png') 0px 57px !important;
	background-repeat: no-repeat !important;
	background-position: 0 0;*/
	}
:deep(.el-menu .defaultSubmenu .el-sub-menu__title) {
	color: #7EA4DD !important;
}

以上即可动态渲染导航菜单，如果为垂直，修改mode模式即可。