element菜单实战

文件sidebar.vue

<template>
	<el-menu
		unique-opened
		background-color="#182132"
		text-color="#9ca9bb"
		active-text-color="#fff"
		:default-active="defaultActive"
		@select="handleMenuSelect"
	>
		<template v-for="menu in menus">
			<el-menu-item
				v-if="!menu.children"
				:key="menu.link"
				:index="menu.link"
			>
				<i :class="[menu.icon,'icon']"
				<span slot="title">{{ menu.title }}</span>
			</el-menu-item>
			<el-submenu
				v-if="menu.children"
				:key="menu.title"
				:index="menu.title"
			>
				<template #title>
					<i :class="[menu.icon,'icon']"/>
					<span>{{ menu.title }}</span>
				</template>
				<el-menu-item
					v-for="item in menu.children"
					:key="item.link"
					:index="item.link"
				>
					{{ item.title }}
				</el-menu-item>
			</el-submene>
		</template>
	</el-menu>
</template>

export default{
	computed:{
		defaultActive(){
			return this.activeRouterName()
		}
	},
	watch:{
		$route(to){
			this.checkMenuActive(to)
		}
	},
	methods:{
		handleMenuSelect(name){
			this.$router.push({name})
		},
		activeRouterName(){
			return this.checkMenuActive(this.$route)
		},
		checkMenuActive(router){
			let activeName=router.name
			this.menus.forEach((menu)=>{
				let active=false
				active=this.menuActive(router,menu)
				if(active){
					activeName=menu.link
				}
				if(menu.children){
					menu.children.forEach(submenu=>{
						active=this.menuActive(router,submenu)
						if(active){
							activeName=submenu.link
						}
					})
				}
			})
			return activeName
		},
		menuActive(router,menu){
			let active=false
			if(Array.isArray(menu.path)){
				menu.path.some(item=>{
					menu.isActive=router.path.indexOf(item)>-1
					active=menu.isActive
					return menu.isActive
				})
			}
			return active
		}
	}
}

menu数据结构

menus:[
	{
		icon:'', // 父菜单icon
		link:'',	// 父菜单路由名称
		title:'',	// 父菜单标题
		children:[
			{
				icon:'', // 子菜单icon
				link:'',  // 子菜单路由名称
				title:'',	// 子菜单标题
				path:[],	// 子菜单激活路径
				isActive:false	// 是否默认激活
			},
			{
				icon:'',
				link:'',
				title:'',
				path:[],
				isActive:false
			}
		]
	}
]