el-menu realizes the left menu bar

v-for loop realizes the secondary menu bar

<router-link>How to use

<el-menu :dafault-active="$route.path" unique-opened>
	<template v-for="item in menuData" :index="item.index">
		<!-- 有二级菜单时  -->
		<el-submenu v-if="item.children" :index="item.index" :key="item.index">
			<!-- 添加一级菜单图标与菜单名  -->
			<template slot="title">
				<i class="el-icon-menu"></i>
				<span>{
   
   {item.name}}</span>
			</template>
			<!--
				此时index的值需要绑定的是 "citem.path" ，结合<el-menu>中的 :dafault-active="$route.path" 才可以实现刷新后当前路由高亮
				之前绑定的是 "citem.index" 的值，一直不生效
				相应的，如果只有一级菜单，也需要进行对应的修改
			-->
			<router-link v-for="(citem cindex) in item.children" :index="citem.path" :to="citem.path" :key="cindex">
				<el-menu-item :index="citem.path" :key="cindex">
					<!-- 添加二级菜单图标与菜单名  -->
					<template slot="title">
						<i class="el-icon-tickets"></i>
						<span>{
   
   {item.name}}</span>
					</template>
				</el-menu-item>
			</router-link>
		</el-submenu>
		<!-- 只有一级菜单 -->
		<!-- 此处index的值需要绑定的也是path -->
		<el-menu-item v-else :index="item.path" :key="item.index">
			<template slot="title">
				<router-link :to="item.path">
					<i class="el-icon-menu"></i>
					<span>{
   
   {item.name}}</span>
				</router-link>
			</template>
		</el-menu-item>
	</template>
</el-menu>

The data part adds the menu bar data that needs to be bound, which is in the form of an array:
just fill in the address that needs to be jumped at the path

data () {
	return {
		menuData: [
			{
				index: '1',
				path: '',
				name: '一级菜单1'
			},
			{
				index: '2',
				//  path: '',
				name: '一级菜单2',
				children: [
					{
						index: '2-1',
						path: '',
						name: '二级菜单1',
					}
				]
			},
		]
	}
}

Enable menu bar routing mode

Set the attribute router
The default value of the router attribute is false, you can add it directly when setting it
or bind the attribute, set the value to true:
Note that it needs to be bound, add ":" in front
:router="true"

<el-menu router></el-menu>
<el-menu :router="true"></el-menu>

Keep the current page menu bar routing highlighted after refreshing

Binding property :default-active="$route.path"
note:

There is a comment in the previous code about the issue of binding the index value when using the v-for loop. Only when the value bound to the index is path ( :index="item.path") can it be highlighted after refreshing
It has been bound to index( :index="item.index") before, so when the console finds that the value of this.$route.path can be obtained, but it will not be highlighted after refreshing

<el-menu :default-active="$route.path"></el-menu>

Only one first-level menu can be expanded at a time

Set the attribute unique-opened
The default value of the unique-opened attribute is false, you can add it directly
or bind the attribute and set the value to true:
:unique-opened="true"

<el-menu unique-opened></el-menu>
<el-menu :unique-opened="true"></el-menu>

Turn off the animation effect when the menu bar expands and collapses

When the menu bar expands and collapses, there is an animation effect by default. The effect is not very good, and it does not look smooth enough.
Set the collapse-transition property to turn it off.
The default value of this property is true, and you can set it to false

<el-menu :collapse-transition="false"></el-menu>