作者简介

引言

导航

✪  Vue开发实例目录总索引
◄ 上一篇【10】Link 文字链接
► 下一篇【12】实现动态左侧菜单导航

一级菜单

实现最简单的一级菜单

在之前的Aside.vue中去实现代码，一级菜单其实非常的简单，直接用el-menu 和el-menu-item 就行，Aside.vue代码如下：

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

效果图如下：

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

<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">
            <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">
            <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">一级菜单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>

刷新页面后，默认选中了第2个菜单

在菜单中加入图标

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

修改分析【其实很简单】：

1. 将el-menu 修改为 el-submenu
2. 按钮名称、图标用 template标签包裹，必须加入 slot="title"属性，否则菜单样式不对。
3. 加入新的两个 el-menu-item。

三级菜单

实现三级菜单

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

加入相关事件

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2"
                 @open="handleOpen"
                 @close="handleClose"
                 @select="handSelect">
            <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",
        methods: {
            handleOpen(key, keyPath) {
                console.log("打开：",key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log("关闭：",key, keyPath);
            },
            handSelect(key, keyPath) {
                console.log("选择：",key, keyPath);
            }
        }
    }
</script>

<style scoped>
</style>

实现点击菜单跳转

1. 创建3个页面 Main1.vue Main2.vue Main2.vue

<template>
    <div>
       这是Main1
    </div>
</template>

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

<style scoped>
</style>

<template>
    <div>
       这是Main2
    </div>
</template>

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

<style scoped>
</style>

<template>
    <div>
       这是Main3
    </div>
</template>

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

<style scoped>
</style>

2. 配置路由

router.js如下：

import VueRouter from "vue-router"
import Index from "./components/Index";
const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        //路由嵌套
        children:[
            {path: '/index/menu1',component: () => import('./components/Main1.vue')},
            {path: '/index/menu2',component: () => import('./components/Main2.vue')},
            {path: '/index/menu3',component: () => import('./components/Main3.vue')}
        ]
    }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export  default router;

在main.js中配置这个路由，让路由生效

在原来的Index.vue页面，设置路由跳转位置，这里我们在原来的Main位置修改位 router-view即可。

3. 菜单中加入路由配置

<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/menu1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
            <el-menu-item index="/index/menu2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="/index/menu3"><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>

我们进入index主路由

点击左侧导航菜单

处理默认的Main窗口为空的情况

小结

这节总结了“el-menu实现左侧菜单导航”，希望能对大家有所帮助，请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】， 如果有兴趣跟小明哥一起学习Java的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【10】Link 文字链接
► 下一篇【12】实现动态左侧菜单导航

热门专栏推荐

【1】Java小游戏（俄罗斯方块、植物大战僵尸等）
【2】JavaWeb项目实战（图书管理、宿舍管理等）
【3】JavaScript精彩实例（飞机大战、验证码等）
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通