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

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

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

如下所示：

<!--導航菜單-折疊功能-->
<aside :class="collapsed?‘menu-collapsed‘:‘menu-expanded‘">
<!--單個激活 并以 index 作為 path 進行路由跳轉(zhuǎn)-->
<el-menu unique-opened router v-show="!collapsed">
<!--動態(tài)路由到子組件 將不可見的路徑隱藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+‘‘" v-if="!item.leaf">
<!--用el ui 的title進行solt分發(fā)菜單-->
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--item.name和item.children.name來配置菜單欄和子菜單欄的名稱-->
<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動態(tài)配置菜單的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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