一、el-menu菜单项高亮设置

el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。

$ route.path对应当前页面路由的路径。
$ route.name对应当前页面路由的名称。他们在router文件夹下的index.js文件中都能查到。
例如：

 path: '/',name: 'Home',component: Home,redirect: '/index',children: [{path: '/index',name: 'Index',component: () => import('../views/Index')},{path: '/sys/user',name: 'User',component: () => import('../views/User')},{path: '/sys/role',name: 'Role',component: () => import('../views/Role')},{path: '/sys/menu',name: 'Menu',component: () => import('../views/Menu')},{path: '/sys/person',name: 'Menu',component: () => import('../views/Person')},]},

所以要实现高亮设置，则可以分两步；
1、设置:default-active=""绑定某个属性值

2、设置菜单项的index值，index值和:default-active绑定的值应是同一个属性值。

例如：

<el-menuclass="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b":default-active="$route.path":router="true">el-submenu :index="menu.path" v-for="menu in menuList"><template slot="title"><i :class="menu.icon"></i><span>{{menu.title}}</span></template><el-menu-item :index="item.path" :route="{path:item.path}" v-for="item in menu.children"><template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template></el-menu-item></el-submenu>

上面代码中的menuList数据

menuList: [{name: 'SysManga',//对应indextitle: '系统管理',icon: 'el-icon-s-operation',path: '',//router-link跳转路由children:  [{name: 'SysUser',title: '用户管理',icon: 'el-icon-s-custom',path: '/sys/user',children: []},{name: 'SysRole',title: '角色管理',icon: 'el-icon-s-custom',path: '/sys/role',children: []},{name: 'SysMenu',title: '菜单管理',icon: 'el-icon-s-custom',path: '/sys/menu',children: []},]},{name: 'SysTools',title: '系统工具',icon: 'el-icon-s-tools',path: '',children: [{name: 'SysDict',title: '数字字典',icon: 'el-icon-s-order',path: '/sys/dicts',children: []},]},]

二、点击菜单项实现路由跳转

分两步：
1、在el-menu中开启路由属性；即:router=“true”

2、给菜单项绑定对应的路由路径
此步骤可以不设置，如果不设置 :route，则在路由匹配时会与item的index属性匹配进行路由跳转。
官方解释：
el-menu router属性

el-item 属性route

个人分析：如果不再item中设置:route，则在路由跳转时根据item 的index绑定值跳转，如果设置了:route，则根据:route值跳转，即:route的优先级高一些。
下面是设置 :route
< el-menu-item :index=“item.path” :route="{path:item.path}" v-for=“item in menu.children”>

Vue el-menu高亮设置及点击菜单项实现路由跳转相关推荐

java点击菜单项文字显示在窗体上_java点击菜单项弹出窗口怎么做啊？
程序如下,可弹不出窗口呀,高手教教我!importjava.awt.*;importjava.awt.event.*;publicclassW111extendsFrameimplementsActi ...
python 系统托盘_python-单击菜单项时退出pyqt系统托盘图标
我是python和pyqt的新手,我今天学习它们,并写了一个小系统托盘恶魔, 它运行,但是当我单击"关于",然后关闭对话框时,应用程序退出. 我不知道为什么简单代码如下: imp ...
mysql workbench怎么设置为中文?(仅菜单项汉化)附带main_menu文件
找到Mysql Workbench安装目录若全部默认则地址如下: C:\Program Files\MySQL\MySQL Workbench 8.0 CE\data 里面有main_menu.xm ...
mysql workbench怎么设置为中文(仅菜单项汉化)附带main_menu文件
找到Mysql Workbench安装目录若全部默认则地址如下: C:Program FilesMySQLMySQL Workbench 8.0 CEdata 里面有main_menu.xml文件 ...
Cocos2dx 菜单项控件-Menu
除了标签以外,按钮也是很重要的UI控件,在游戏菜单中,按钮是必不可少的控件,它可以对游戏画面进行操作,例如游戏开始菜单项.暂停菜单项和退出菜单项等. 在对菜单项进行学习时,有必要先对MenuItem类 ...
怎样实现微信公众号点击菜单自动回复文字信息
为了满足微信公众号点击菜单自动回复文字信息的需要,第三方平台微号帮提供了粉丝点菜单定时推送功能实现,粉丝点击公众号菜单栏可以自动回复文字信息,可以更改回复信息的昵称和头像,回复信息内容可以显示粉丝昵称 ...
sublime存模板_Sublime Text新建.vue模板并高亮
准备工作下载安装新建文件模板插件 SublimeTmpl 下载安装vue语法高亮插件 Vue Syntax Highlight Sublime Text安装插件的方法有两种:使用Sublime Tex ...
使用vue+el构建表格_如何使用Vue和VuePress构建文档系统
使用vue+el构建表格介绍 (Introduction) Good documentation is a critical part of a successful project, but a ...
Element-ui导航组件NavMenu导航高亮设置
Element-ui导航组件: NavMenu导航HighLight高亮设置 1. 文件navMenu.vue,部分代码参考: <template><div class=" ...

Vue el-menu高亮设置及点击菜单项实现路由跳转

el-menu相关知识记录

一、el-menu菜单项高亮设置

二、点击菜单项实现路由跳转

Vue el-menu高亮设置及点击菜单项实现路由跳转相关推荐

最新文章

热门文章