Element el-menu中NavMenu的用法
更新時間：2023年04月13日 11:19:20 作者：優(yōu)雅的王德奧
今天封裝一個導航欄的組件,使用的Element的NavMenu組件。遇到一個問題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下
最近在使用Element開發(fā)時 一開始按照官網示例 產品前期沒什么問題 到了后期 遇到這樣一個情況：并不是只有點擊導航欄才跳轉頁面
需求：
如果根據官網的示例，每個el-menu-item的index都為’1-1’ '1-2’之類的。如果直接跳轉路由，你會發(fā)現導航欄當前激活菜單的 index沒有改變。點擊跳轉。但菜單欄依舊停留在分組這個欄目
只有兩種方法可以解決這個問題：
- 通過子組件的this.$emit方法觸發(fā)父組件綁定的事件，改變default-active屬性值
- 通過vuex儲存el-menu的default-active屬性值，在子組件的點擊事件改變這個屬性值
但是我試了第一種方法，沒有生效。可能需要watch這個變量才能響應。這兩種方法可能比較麻煩，后來發(fā)現一個很有效的方法。廢話不多說。代碼如下
正確用法：
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
:collapse="isCollapse"
router
overflow-y:
scroll
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">賬號管理</span>
</template>
<el-menu-item index="/demo/index">列表</el-menu-item>
<el-menu-item index="/demo/group/index">分組</el-menu-item>
</el-submenu>
</el-menu>總結：
將default-active設置為$route.path，el-menu-item的index設為要跳轉的路由（并且點擊菜單項，會直接push到點擊的頁面)。注意：一定要設置el-submenu的index屬性（1，2，3…）。不然會出bug
這樣就無需關心default-active的屬性值了。只要路由改變了，對應的菜單項也會激活
到此這篇關于Element el-menu中NavMenu的用法的文章就介紹到這了,更多相關el-menu NavMenu內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
本文主要介紹了Vue項目打包部署到GitHub Pages的實現步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
在Vue2中組件的props的數據流動改為了只能單向流動，如何在Vue2中實現組件props雙向綁定 ，一起來跟小編看看。2017-03-03
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機制(bus)的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
最近因為three.js的項目要用Vue.js,下面這篇文章主要給大家介紹了關于vue中使用three.js報錯的解決方法,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了如何基于vue手動實現一個日歷組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學習一下2024-01-01
Vue 實現監(jiān)聽窗口關閉事件,并在窗口關閉前發(fā)送請求
這篇文章主要介紹了Vue 實現監(jiān)聽窗口關閉事件,并在窗口關閉前發(fā)送請求，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2.x 從vue.config.js配置到項目優(yōu)化
這篇文章主要介紹了vue2.x 從vue.config.js配置到項目優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案
這篇文章主要介紹了vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
本篇文章主要介紹了 vue中的event bus非父子組件通信解析 ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10