Element el-menu中NavMenu的用法
最近在使用Element開發(fā)時 一開始按照官網(wǎng)示例 產(chǎn)品前期沒什么問題 到了后期 遇到這樣一個情況：并不是只有點擊導(dǎo)航欄才跳轉(zhuǎn)頁面
需求：
如果根據(jù)官網(wǎng)的示例，每個el-menu-item的index都為’1-1’ '1-2’之類的。如果直接跳轉(zhuǎn)路由，你會發(fā)現(xiàn)導(dǎo)航欄當(dāng)前激活菜單的 index沒有改變。點擊跳轉(zhuǎn)。但菜單欄依舊停留在分組這個欄目
只有兩種方法可以解決這個問題：
- 通過子組件的this.$emit方法觸發(fā)父組件綁定的事件，改變default-active屬性值
- 通過vuex儲存el-menu的default-active屬性值，在子組件的點擊事件改變這個屬性值
但是我試了第一種方法，沒有生效?？赡苄枰獁atch這個變量才能響應(yīng)。這兩種方法可能比較麻煩，后來發(fā)現(xiàn)一個很有效的方法。廢話不多說。代碼如下
正確用法：
<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>總結(jié)：
將default-active設(shè)置為$route.path，el-menu-item的index設(shè)為要跳轉(zhuǎn)的路由（并且點擊菜單項，會直接push到點擊的頁面)。注意：一定要設(shè)置el-submenu的index屬性（1，2，3…）。不然會出bug
這樣就無需關(guān)心default-active的屬性值了。只要路由改變了，對應(yīng)的菜單項也會激活
到此這篇關(guān)于Element el-menu中NavMenu的用法的文章就介紹到這了,更多相關(guān)el-menu NavMenu內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element中table操作按鈕展示與折疊的實現(xiàn)示例
因為隨著功能的增多，table操作欄中的功能按鈕增多，這時候就需要折疊，本文主要介紹了element中table操作按鈕展示與折疊的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2022-04-04
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細(xì)解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue利用computed配合watch實現(xiàn)監(jiān)聽多個屬性的變化
這篇文章主要給大家介紹了在Vue中巧用computed配合watch實現(xiàn)監(jiān)聽多個屬性的變化的方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了Vue過濾器的用法和自定義過濾器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
今天小編就為大家分享一篇vue移動端彈框組件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用Vue.js開發(fā)微信小程序開源框架mpvue解析
這篇文章主要介紹了使用Vue.js開發(fā)微信小程序開源框架mpvue解析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了vue的Des加密解密使用實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了詳解polyfills如何按需加載及場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
vue之el-tree懶加載數(shù)據(jù)并且實現(xiàn)樹的過濾問題
這篇文章主要介紹了vue之el-tree懶加載數(shù)據(jù)并且實現(xiàn)樹的過濾問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04