Element el-menu中NavMenu的用法
最近在使用Element開發(fā)時(shí) 一開始按照官網(wǎng)示例 產(chǎn)品前期沒什么問題 到了后期 遇到這樣一個(gè)情況：并不是只有點(diǎn)擊導(dǎo)航欄才跳轉(zhuǎn)頁面
需求：
如果根據(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)。這兩種方法可能比較麻煩，后來發(fā)現(xiàn)一個(gè)很有效的方法。廢話不多說。代碼如下
正確用法：
<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)擊的頁面)。注意：一定要設(shè)置el-submenu的index屬性（1，2，3…）。不然會(huì)出bug
這樣就無需關(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)文章
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟
本文主要介紹了Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
詳解如何在Vue2中實(shí)現(xiàn)組件props雙向綁定
在Vue2中組件的props的數(shù)據(jù)流動(dòng)改為了只能單向流動(dòng)，如何在Vue2中實(shí)現(xiàn)組件props雙向綁定 ，一起來跟小編看看。2017-03-03
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機(jī)制(bus)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法
最近因?yàn)閠hree.js的項(xiàng)目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求
這篇文章主要介紹了Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2.x 從vue.config.js配置到項(xiàng)目優(yōu)化
這篇文章主要介紹了vue2.x 從vue.config.js配置到項(xiàng)目優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案
這篇文章主要介紹了vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
本篇文章主要介紹了 vue中的event bus非父子組件通信解析 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10