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

引言

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

一级菜单

实现最简单的一级菜单

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

效果图如下：

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

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

设置选中后菜单文字颜色

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

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

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

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

在菜单中加入图标

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

二级菜单

实现二级菜单

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

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

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

三级菜单

实现三级菜单

跟二级菜单的修改方式是一样的，就是多加一层

加入相关事件

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

实现点击菜单跳转

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

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

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中配置这个路由，让路由生效

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！