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屬性值，在子組件的點擊事件改變這個屬性值
但是我試了第一種方法，沒有生效。可能需要watch這個變量才能響應(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)文章
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Vue項目打包部署到GitHub Pages的實現(xiàn)步驟
本文主要介紹了Vue項目打包部署到GitHub Pages的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
在Vue2中組件的props的數(shù)據(jù)流動改為了只能單向流動，如何在Vue2中實現(xiàn)組件props雙向綁定 ，一起來跟小編看看。2017-03-03
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機制(bus)的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
最近因為three.js的項目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報錯的解決方法,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了如何基于vue手動實現(xiàn)一個日歷組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求
這篇文章主要介紹了Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2.x 從vue.config.js配置到項目優(yōu)化
這篇文章主要介紹了vue2.x 從vue.config.js配置到項目優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案
這篇文章主要介紹了vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
本篇文章主要介紹了 vue中的event bus非父子組件通信解析 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10