el-menu实现左侧菜单栏

el-menu实现左侧菜单栏

v-for循环实现二级菜单栏

• 使用<router-link>方式

<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>

data部分添加需要绑定的菜单栏数据，是数组的形式：
在path处填上需要跳转的地址即可

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

开启菜单栏路由模式

设置属性 router
router属性的默认值是false，设置的时候可以直接添加就好
或者绑定属性，把值设为true：
注意需要绑定，前面加 “:”
:router=“true”

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

刷新后保持当前页菜单栏路由高亮

绑定属性 :default-active="$route.path"
注意：

• 前边代码中有注释，关于使用v-for循环时，需要绑定 index 值的问题，index绑定的值是path时(:index="item.path")，才可以实现刷新后后高亮
• 之前一直绑定的是index(:index="item.index")，因此console的时候发现可以获取到this.$route.path的值，但是刷新后并不会高亮

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

一次只能展开一个一级菜单

设置属性 unique-opened
unique-opened属性的默认值是false，设置的时候可以直接添加就好
或者绑定属性，把值设为true：
:unique-opened=“true”

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

关闭菜单栏展开与折叠时的动画效果

菜单栏展开与折叠时默认有动画效果，效果其实不太好，看起来不够流畅
设置collapse-transition属性可以进行关闭
该属性的默认值是true，设置为false即可

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