一级菜单

实现最简单的一级菜单

一级菜单其实非常的简单，直接用el-menu 和el-menu-item 就行，代码如下：

<template>
    <div>
        <el-menu>
            <el-menu-item>一级菜单1</el-menu-item>
            <el-menu-item>一级菜单2</el-menu-item>
            <el-menu-item>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>
</style>

设置菜单背景颜色和文字颜色

在el-menu中设置 background-color 和 text-color 属性

 

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff">
            <el-menu-item>一级菜单1</el-menu-item>
            <el-menu-item>一级菜单2</el-menu-item>
            <el-menu-item>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

接下可以设置默认选中和背景色和点击时发生的状态

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-menu-item index="1">一级菜单1</el-menu-item>
            <el-menu-item index="2">一级菜单2</el-menu-item>
            <el-menu-item index="3">一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

添加图标

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-menu-item index="1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
            <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

二级菜单 

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2" >
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

三级菜单 

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
                <el-submenu index="1-1">
                    <template slot="title"><i class="el-icon-location"></i><span>选项1</span></template>
                    <el-menu-item index="1-1-1">选项1-1</el-menu-item>
                    <el-menu-item index="1-1-2">选项1-2</el-menu-item>
                </el-submenu>
                <el-submenu index="1-2">
                    <template slot="title"><i class="el-icon-location"></i><span>选项2</span></template>
                    <el-menu-item index="1-2-1">选项2-1</el-menu-item>
                    <el-menu-item index="1-2-2">选项2-2</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>
</style>

接下来简单的案例： 

配合路由具体路由的学习可以传到以前的教学：Vue2中vue-router的使用_Dominic东的博客-CSDN博客

<template>
    <div style="height: 100%;">
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" class="el-menu-vertical-demo"
                    router>
            <el-menu-item index="/index/demo1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
            <el-menu-item index="/index/demo2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="/index/demo3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        height: 100%;
    }
</style>

页面： 

子组件显示父组件：

子父组件不会的可以看之前的文章：Vue2.0 vue组件（父子组件）_Dominic东的博客-CSDN博客

<template>
	<div class="container">
		<el-container style="height: 100%;">
			<el-header>
				<header></header>
				<div class="flex-col">
					<el-container>
						<el-aside class="flex-width"><Aside></Aside>
						<el-main><router-view></router-view></el-main></el-aside>
					</el-container>
				</div>
				<el-footer></el-footer>
			</el-header>
		</el-container>
	</div>
</template>

<script>
import Aside from "./sideBar";
export default {
    name: 'index',
    data() {
        //这里存放数据",
        return {
            
        };
    },
    components: { Aside },
}	
	
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.flex-width{
		display: flex;
	}
	.flex-col{
		display: flex;
		flex-direction: column;
		height: 96vh;
	}
</style>

 路由部分配置：

{
	path: '/index',
	component: Index,
	redirect:'/index/demo1',
	children:[
		{path: '/index/demo1',component: () => import('../view/demo1.vue')},
		{path: '/index/demo2',component: () => import('../view/demo2.vue')},
		{path: '/index/demo3',component: () => import('../view/demo3.vue')}
	]
}

 效果图：