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