解決elementui中NavMenu導航菜單高亮問題(解決多種情況)
更新時間：2022年05月23日 11:11:46 作者：winne雪
這篇文章主要介紹了解決elementui中NavMenu?導航菜單高亮問題(解決多種情況)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
如果使用elementui這個框架來開發(fā)系統(tǒng)，那么我們幾乎都會使用到NavMenu 組件。
我們可能需要菜單根據(jù)我們點擊的那一項高亮顯示，刷新頁面了之后還是會相應的高亮顯示。
elementUI組件官網(wǎng)：
https://element.eleme.io/#/zh-CN/component/menu
我在項目中遇到的情況有三種：（vue-cli+elementui）
1、橫向菜單
如果僅有一個菜單，那么點擊當前菜單高亮；如果菜單下有二級下拉，那么點擊下拉二級菜單高亮，并且一級菜單也高亮，mode="horizontal"時一級菜單就會自動高亮了。（刷新頁面后依舊保持高亮）
2、縱向菜單
如果僅有一個菜單，那么點擊當前菜單高亮；如果菜單下有二級下拉，那么點擊下拉二級菜單高亮（刷新頁面后依舊保持高亮）
3、嵌套式菜單
橫向主菜單高亮，代表這個頁面是當前頁面；在當前頁面中還嵌入一個縱向菜單，這個縱向菜單高亮代表這個頁面顯示不同的tab（刷新頁面后依舊保持高亮）
代碼實現(xiàn)
NavMenu 導航菜單高亮如果需要刷新頁面了之后也能高亮，那么就使用路由匹配式高亮。
我們的el-menu組件標簽中配置最重要的兩個（其他配置看官網(wǎng)）：
:default-active="activeMenu" // 默認高亮（當前激活菜單的 index） router // 是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉，此時菜單的高亮是menu組件中的index屬性和地址欄中的路徑匹配到了就會高亮。
1、橫向菜單
導航菜單默認為垂直模式，通過mode屬性設置成horizontal可以使導航菜單變更為水平模式。
<el-menu
:default-active="activeMenu"
class="el-menu-demo"
mode="horizontal"
router
:background-color="#000"
text-color="#fff"
active-text-color="#409eff">
<el-menu-item index="/home"><i class="iconfont icon-zhuye" style="vertical-align: 0px;"></i> 首頁</el-menu-item>
<el-submenu index="1">
<template slot="title"><i class="el-icon-monitor"></i>監(jiān)控</template>
<el-menu-item index="/monitor/aaa">111111</el-menu-item>
<el-menu-item index="/monitor/bbb">22222</el-menu-item>
<el-menu-item index="/monitor/ccc">333333</el-menu-item>
<el-menu-item index="/monitor/ddd">44444</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-s-marketing"></i>CDN</template>
<el-menu-item index="/cdn/aaa">域名管理</el-menu-item>
<el-menu-item index="/cdn/bbb">111111</el-menu-item>
<el-menu-item index="/cdn/ccc">222222</el-menu-item>
<el-menu-item index="/cdn/ddd">333333</el-menu-item>
</el-submenu>
<el-menu-item index="/apiDocument"><i class="iconfont icon-iconset0118"></i> 接口文檔</el-menu-item>
</el-menu>
export default {
computed: {
// 我們使用計算屬性來獲取到當前點擊的菜單的路由路徑，然后設置default-active中的值
// 使得菜單在載入時就能對應高亮
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
// 可以在路由配置文件中設置自定義的路由路徑到meta.activeMenu屬性中，來控制菜單自定義高亮顯示
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
}
}2、縱向菜單
其實橫向菜單和縱向菜單的配置差不多，區(qū)別在于去掉mode屬性就變成縱向垂直菜單了。高亮配置和橫向菜單是一致的。
在縱向菜單的時候如果點擊二級菜單高亮了，默認一級菜單不會高亮。
3、嵌套式菜單
嵌套式菜單中我們要同時控制兩個分離菜單的高亮，那么在路由配置文件router/index.js中及其重要了，需要在每項路由中設置meta屬性的不同字段來控制高亮。
記?。核⑿氯阅芨吡潦且月酚陕窂狡ヅ涫礁吡?/p>
結合第一點的橫向菜單為主菜單menu配置，特別注意文檔接口那一項的index路徑。
文檔接口頁面的縱向菜單配置：
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo api-menu"
router
@open="handleOpen"
@close="handleClose"
background-color="#f8f8f8"
:default-openeds=defaultOpen
text-color="#666"
active-text-color="#409eff">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-s-marketing"></i>
<span class="bold-font">CDN</span>
</template>
<el-menu-item index="/apiDocument/cdnSummary">
<span class="bold-font">概覽</span>
</el-menu-item>
<el-submenu index="1-1">
<template class="sub-drop-title" slot="title"><span class="bold-font">API列表</span> 總數(shù)2個</template>
<el-menu-item class="api-menu-item" index="/apiDocument/pushRefresh">
<span class="api-item">
<span>push_refresh </span>
<span style="font-size: 13px;color:#999;">aaaaa</span>
</span>
</el-menu-item>
<el-menu-item class="api-menu-item" index="/apiDocument/refreshTasks">
<span class="api-item">
<span>refresh_tasks </span>
<span style="font-size: 13px;color:#999;">bbbbb</span>
</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
export default {
data () {
return {
defaultOpen: ['1','1-1'] // 默認展開菜單項
}
},
computed: {
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.apiActiveMenu) { // 注意這里很重要
return meta.apiActiveMenu
}
return path
}
}
}
router/index.js文件的路由配置（特別關注activeMenu、apiActiveMenu的配置）：
routes: [
// 重定向，打開接口文檔頁面就重定向到 概覽
{
path: '/apiDocument',
redirect: '/apiDocument/cdnSummary',
hidden: true // 不需要再Menu菜單上顯示的就設置這個屬性
},
// 接口文檔路由
{
// 接口文檔菜單的動態(tài)加載配置 start
path: '',
name: 'apiDocument',
component: customerLayout,
gotoPath: '/apiDocument', // 自定義屬性 （主菜單中的index屬性值）
meta: {
title: '接口文檔',
activeMenu: '/apiDocument'
},
showOne: true, // 自定義屬性
hidden: true,
// 接口文檔菜單的動態(tài)加載配置 end
children: [{
path: '',
component: apiDoc,
children: [
{
path: '/apiDocument/cdnSummary',
component: cdnSummary,
meta: {
activeMenu: '/apiDocument', // 主菜單 的 接口文檔 高亮
apiActiveMenu: '/apiDocument/cdnSummary' // 接口文檔的子菜單高亮
}
},
{
path: '/apiDocument/pushRefresh',
component: pushRefresh,
meta: {
activeMenu: '/apiDocument',
apiActiveMenu: '/apiDocument/pushRefresh' // 接口文檔的子菜單高亮
}
},
{
path: '/apiDocument/refreshTasks',
component: refreshTasks,
meta: {
activeMenu: '/apiDocument',
apiActiveMenu: '/apiDocument/refreshTasks' // 接口文檔的子菜單高亮
}
}
]
}]
}
]
實現(xiàn)高亮的思想是：
在每次點擊縱向菜單時瀏覽器地址欄中的地址就會改變，這時地址欄就會和apiActiveMenu配置中地址一致，我們使用apiActiveMenu來自定義控制二級對應高亮；
而一級菜單欄由activeMenu來自定義高亮，使得activeMenu配置和一級菜單的index屬性中的配置一直一致，這樣接口文檔內的縱向菜單在切換的時候就不會影響到一級主菜單的高亮了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面切換滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
大家都知道當使用時才裝入需要的組件，可以有效的提高首次裝入頁面的速度。比如在路由切換時，下面這篇文章主要給大家介紹了關于如何實現(xiàn)一個簡單的Vue異步組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-12-12
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)彈出框點擊顯示隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
Vue echart實現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實現(xiàn)echart繪圖代碼詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點
監(jiān)聽事件是我們在使用vue.js的時候經(jīng)常使用的一個功能，下面這篇文章主要介紹了Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點 的相關資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
這篇文章主要介紹了關于vue-treeselect綁值、回顯等常見問題的總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue路由傳參的使用場景一般都是應用在父路由跳轉到子路由時,攜帶參數(shù)跳轉,下面這篇文章主要給大家介紹了關于vue路由傳參方式的方式總結及獲取參數(shù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中如何初始化data數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05