如何使用vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站公司2013年成立，公司自成立以來始終致力于為企業(yè)提供官網(wǎng)建設(shè)、移動(dòng)互聯(lián)網(wǎng)業(yè)務(wù)開發(fā)（小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、app開發(fā)定制等），并且包含互聯(lián)網(wǎng)基礎(chǔ)服務(wù)（域名、主機(jī)服務(wù)、企業(yè)郵箱、網(wǎng)絡(luò)營(yíng)銷等）應(yīng)用服務(wù)；以先進(jìn)完善的建站體系及不斷開拓創(chuàng)新的精神理念，幫助企業(yè)客戶實(shí)現(xiàn)互聯(lián)網(wǎng)業(yè)務(wù)，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊譽(yù)。

最近在使用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)的頁面

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

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

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

代碼：

效果圖：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。