最近在使用vue-cli3配合iview框架搭建新的項(xiàng)目中用到了iview中的menu菜單，按照官網(wǎng)寫法固定不太好，因?yàn)橐话沩?xiàng)目都是從后端動(dòng)態(tài)獲取菜單列表，所以我們需要將官網(wǎng)代碼稍作修改，代碼如下：

注意事項(xiàng)：

【1】菜單高亮部分動(dòng)態(tài)綁定路由跳轉(zhuǎn)的頁(yè)面

Menu組件中有一個(gè)active-name反映的是當(dāng)前高亮區(qū)域，因此可以動(dòng)態(tài)的綁定active-name來(lái)實(shí)現(xiàn)高亮顯示。前提是需要將MenuItem綁定的name也設(shè)置成頁(yè)面路由的name

【2】動(dòng)態(tài)獲取菜單數(shù)據(jù)，需要更新菜單

this.$nextTick(() => { this.$refs.side_menu.updateOpened() this.$refs.side_menu.updateActiveName() });

代碼：

<template> <div class='leftNav'> <Menu ref='side_menu' theme='dark' accordion v-for='(menuItem, menuIndex) in menuList' :key='menuIndex' :active-name='$route.name'> <!-- 展開沒有子菜單 --> <MenuItem v-if='!menuItem.children || menuItem.children.length==0' :key='menuIndex' :name='menuItem.to' :to='menuItem.to'> <Icon :type='menuItem.icon' /> <span>{{ menuItem.name }}</span> </MenuItem> <!-- 展開有子菜單 --> <Submenu v-else :name='menuIndex'> <template slot='title'> <Icon :type='menuItem.icon' /> <span>{{menuItem.name}}</span> </template> <MenuItem v-for='(item, index) in menuItem.children' :key='index' :name='item.to' :to='item.to'>{{item.name}}</MenuItem> </Submenu> </Menu> </div> </template><script>export default { data() { return { menuList: [ { name: '首頁(yè)', to: 'home', icon: 'ios-archive-outline' }, { name: '關(guān)于', to: 'about', icon: 'ios-create-outline' }, { name: '菜單分類1', icon: 'md-person', children: [ { name: '用戶', to: 'user' } ] }, { name: '菜單分類2', icon: 'ios-copy', children: [ { name: '測(cè)試', to: 'test' } ] } ] }; }, created() { // 數(shù)據(jù)我先寫靜態(tài)的，可在初始化的時(shí)候通過(guò)請(qǐng)求，將數(shù)據(jù)指向menuList。 // ajax成功回調(diào)后 this.menuList = response.data; // 別忘記更新菜單 // this.$nextTick(() => { //this.$refs.side_menu.updateOpened() //this.$refs.side_menu.updateActiveName() //}); }};</script><style lang='scss' scoped>/deep/ .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { border-right: none; color: #fff; background: #2d8cf0 !important;}</style>

效果圖：

到此這篇關(guān)于vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單的文章就介紹到這了,更多相關(guān)vue iview左側(cè)動(dòng)態(tài)菜單內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！