首页 > 资讯 > 前端开发 > JavaScript >Vue el-menu 左侧菜单导航功能的实现

420

分享到

Vue el-menu 左侧菜单导航功能的实现

2024-04-02 19:04:59 420人浏览安东尼

摘要

目录引言一级菜单实现最简单的一级菜单设置菜单背景颜色和文字颜色设置选中后菜单文字颜色在菜单中加入图标二级菜单实现二级菜单修改分析【其实很简单】：三级菜单实现三级菜单实现点击菜单跳转小

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

一级菜单

实现最简单的一级菜单

在之前的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>

效果图如下：

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

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

设置选中后菜单文字颜色

设置 active-text-color 属性，但是必须在需要生效的子菜单中设置index属性，否则不生效，先不设置index

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

可以看到我点击以后，菜单文字的颜色没有变化，现在来加入index属性

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

上图我们可以看到开始是没有选中菜单的，是可以设置默认的选中菜单的，设置default-active为对应的index值即可，比如我设置默认选中第2个菜单，第2个菜单的index为2，所以我们在el-menu中加入 default-active=“2”

<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个菜单

在菜单中加入图标

在菜单中加入图标会使得我们的菜单看起来比较漂亮、舒服，这样涉及到图标的使用，可以参考我前面的文章：Vue开发实例（08）之Icon图标的使用
用 i 标签即可，在菜单名前面加入 <i class=“el-icon-XXX”>，XXX是图标的名称。

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

二级菜单

实现二级菜单

修改一级菜单1为2级菜单

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

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

将el-menu 修改为 el-submenu
按钮名称、图标用 template标签包裹，必须加入 slot="title"属性，否则菜单样式不对。
加入新的两个 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>

加入相关事件

打开open、关闭close、选择select 3个事件
在el-menu中加入三个事件属性，并编写对应的method

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

实现点击菜单跳转

当点击菜单项，能够在右边的Main窗口中显示对应的页面。

创建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.配置路由

在src下创建 router.js
创建了主路由index，就是进入的主页面
这3个index子路由，用来跳转，分别对应 main1 main2 main3 几个页面。
子路由的跳转位置为，index的Main位置，因为我们管理系统只需要Main位置发生改变，头部、左边导航、下方footer是不需要改变的。

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;

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

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

菜单中加入路由配置

这里我们使用一级菜单，简单方便，修改Aside.vue的代码。
在el-menu里面加入 router属性
在el-menu-item 的index，设置对应的子路由

<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窗口为空的情况

刚进入index路由的时候，我们看到main窗口里面是没有东西的

这样显然不好看，于是我们可以设置默认的跳转位置，设置如下：

在子路由中添加一个新的路由，用来默认跳转
在主路由中配置redirect 值为这个子路由

上方其实就是一个重定向的操作，当直接输入index路由时就会默认跳转到Main路由里面，这样就会有个默认的页面了。

下方我们在地址栏只输入到index，敲回车后，会在后面默认加上 “/Main”，直接重定向了，同时Main窗口的页面也显示了我们指定的页面。

小结

这节总结了“el-menu实现左侧菜单导航”，希望能对大家有所帮助

到此这篇关于Vue el-menu 左侧菜单导航的文章就介绍到这了,更多相关Vue el-menu菜单导航内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue el-menu 左侧菜单导航功能的实现

本文链接: https://www.lsjlt.com/news/165788.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue el-menu 左侧菜单导航功能的实现

目录引言一级菜单实现最简单的一级菜单设置菜单背景颜色和文字颜色设置选中后菜单文字颜色在菜单中加入图标二级菜单实现二级菜单修改分析【其实很简单】：三级菜单实现三级菜单实现点击菜单跳转小...

99+

2024-04-02
jquery实现网页左侧导航菜单栏

本文实例为大家分享了jquery实现网页左侧导航菜单栏的具体代码，供大家参考，具体内容如下 1.首先在<head></head>之间添加 <scrip...

99+

2024-04-02
Vuemock.js模拟数据实现首页导航与左侧菜单功能

目录一、mock.js的使用mock.js的使用步骤1、安装mock依赖2、添加开发环境及生产环境的配置3、引入到main.js二、前台主页面的搭建2.1 准备相关组件2.2 配置路...

99+

2024-04-02
js左侧三级菜单导航实例代码

效果演示：实例代码：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//...

99+

2022-11-15

js 三级菜单导航
实例讲解Vue怎么实现左侧导航栏右侧标签页功能

Vue是一款流行的JavaScript框架，它可以用于创建强大的Web应用程序。在本文中，我们将介绍如何使用Vue实现左侧导航栏右侧标签页。首先，我们需要创建一个Vue实例，以便我们可以使用Vue的组件和指令。我们可以通过使用Vue-cli...

99+

2023-05-14
Html+Css+Jquery如何实现左侧滑动拉伸导航菜单栏

这篇文章主要介绍了Html+Css+Jquery如何实现左侧滑动拉伸导航菜单栏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。PC端移动端代码<!DOCTYPE ...

99+

2023-06-09
Vue el-table实现右键菜单功能

本文实例为大家分享了Vue el-table实现右键菜单功能的具体代码，供大家参考，具体内容如下实现的效果如下： 1.el-table和右键菜单视图代码 @row-context...

99+

2024-04-02
vue实现拖动左侧导航栏变大变小

本文实例为大家分享了vue实现拖动左侧导航栏变大变小的具体代码，供大家参考，具体内容如下 <template> <div> <div cl...

99+

2024-04-02
react实现左侧菜单的方法

今天小编给大家分享的是react实现左侧菜单的方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。react实现左侧菜单的方法：1、定义好路由结构，代码如“const Router =...

99+

2023-07-04
Vue el-table怎么实现右键菜单功能

这篇文章主要介绍了Vue el-table怎么实现右键菜单功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue el-table怎么实现右键菜单功能文章都会有所收获，下面我们一起来看看吧...

99+

2023-06-29
vue+el-menu实现菜单栏无限多层级分类

本文实例为大家分享了vue+el-menu实现菜单栏无限多层级分类的具体代码，供大家参考，具体内容如下思路：数据格式须为数组内部多层嵌套模式，利用递归渲染菜单栏数据实现菜单多层级分...

99+

2024-04-02
vue实现导航栏下拉菜单

本文实例为大家分享了vue实现导航栏下拉菜单的具体代码，供大家参考，具体内容如下先看效果：下拉菜单铺满全屏 <div class="nav">...</div...

99+

2024-04-02
vue怎么实现左侧菜单树形图递归

这篇文章主要讲解了“vue怎么实现左侧菜单树形图递归”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现左侧菜单树形图递归”吧！先说说遇到的坑，由于是子父组件，当时传递使用的是子父组...

99+

2023-07-04
Vue使用element-ui实现菜单导航

本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码，供大家参考，具体内容如下效果图目录截图安装vue-router 和 element-ui vue-...

99+

2024-04-02
vue如何实现拖动左侧导航栏变大变小

这篇文章给大家分享的是有关vue如何实现拖动左侧导航栏变大变小的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下<template> <div> &...

99+

2023-06-29
vue+el-menu如何实现菜单栏无限多层级分类

这篇文章主要介绍了vue+el-menu如何实现菜单栏无限多层级分类，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下思路：数据格式须为数组内部多层嵌套模式，利用递归...

99+

2023-06-29
Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

目录1.最终实现的效果图2. 实现左侧菜单折叠与展开功能步骤2.1 首先应该在菜单顶部放一个折叠展开的按钮条2.2 接下来，画按钮条UI结构，实现折叠与展开功能2.3&n...

99+

2024-04-02
vue中如何实现左侧菜单,树形图递归

这篇文章给大家分享的是有关vue中如何实现左侧菜单,树形图递归的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图如下所示：先说说遇到的坑，由于是子父组件，当时传递使用的是子父组...

99+

2024-04-02
Vue实现tab导航栏并支持左右滑动功能

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。 tab导航栏布...

99+

2024-04-02
el-menu递归实现多级菜单组件的示例

目录1. 效果：2. 实现：3. 使用组件：1. 效果： 2. 实现：创建外层菜单AsideMenu.vue组件和子菜单项AsideSubMenu.vue组件，在AsideS...

99+

2023-05-15

el-menu多级菜单 el-menu递归菜单