快捷導(dǎo)航

vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例

更新時(shí)間：2018年09月07日 11:07:06 作者：HGJacky

今天小編就為大家分享一篇vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<!--導(dǎo)航菜單-折疊功能-->
<aside :class="collapsed?‘menu-collapsed‘:‘menu-expanded‘">
<!--單個(gè)激活 并以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)-->
<el-menu unique-opened router v-show="!collapsed">
<!--動(dòng)態(tài)路由到子組件 將不可見(jiàn)的路徑隱藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+‘‘" v-if="!item.leaf">
<!--用el ui 的title進(jìn)行solt分發(fā)菜單-->
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--item.name和item.children.name來(lái)配置菜單欄和子菜單欄的名稱-->
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>

以上這篇vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談基于Vue.js的移動(dòng)組件庫(kù)cube-ui
這篇文章主要介紹了基于Vue.js的移動(dòng)組件庫(kù)cube-ui，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
Vue編寫(xiě)炫酷的時(shí)鐘插件
這篇文章主要為大家詳細(xì)介紹了Vue編寫(xiě)炫酷的時(shí)鐘插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
vue-Split實(shí)現(xiàn)面板分割
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能
這篇文章主要為大家詳細(xì)介紹了vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置
這篇文章主要介紹了詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
Vue中動(dòng)畫(huà)與過(guò)渡的使用教程
最近在寫(xiě)vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫(huà)不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue中英文切換實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于vue中英文切換實(shí)例代碼，需要的朋友們學(xué)習(xí)參考下。
2020-01-01
vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)(compactBox?緊湊樹(shù))
本文主要介紹了vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
VUE安裝使用教程詳解
這篇文章主要介紹了安裝使用VUE的教程，本文給大家提到了遇到的問(wèn)題原因分析及解決方法,需要的朋友可以參考下
2019-06-06
vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過(guò)程解析(面向新手)
這篇文章主要介紹了vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08