el-menu相關知識記錄

• 一、el-menu菜單項高亮設置
• 二、點擊菜單項實現路由跳轉

2021/11/13 知識點記錄

一、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高亮设置及点击菜单项实现路由跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。