這篇文章主要介紹了vue+iview的菜單與頁(yè)簽如何聯(lián)動(dòng)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue+iview的菜單與頁(yè)簽如何聯(lián)動(dòng)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)專注于黃陂企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。黃陂網(wǎng)站建設(shè)公司,為黃陂等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

vue+iview菜單與頁(yè)簽聯(lián)動(dòng)

一、使用iview的menu和tab做布局，將這兩個(gè)組件放到主頁(yè)面

由于menu與tab的數(shù)據(jù)相同且樣式需要進(jìn)行關(guān)聯(lián)，因此可以使用vuex進(jìn)行狀態(tài)管理，state中寫入需要管理的數(shù)據(jù)和狀態(tài)變量，在mutations中設(shè)置操作的動(dòng)作，actions中監(jiān)聽(tīng)一些行為（我的菜單沒(méi)有展開(kāi)收縮部分，因此并沒(méi)有使用到actions）

二、做好布局之后要對(duì)菜單增加點(diǎn)擊事件

on-select，首先在mutations中注冊(cè)tab的改變事件，當(dāng)左側(cè)菜單點(diǎn)擊的時(shí)候查看tab中是否已經(jīng)有這個(gè)頁(yè)簽并設(shè)置isExist=false，如果存在，isExist修改為true，沒(méi)有的話給tab對(duì)應(yīng)遍歷的數(shù)組增加菜單相對(duì)索引的數(shù)據(jù)。

mutationsType中

mutations中：

menu組件中的事件為：

在tab組件中首先設(shè)置頁(yè)面默認(rèn)路由：

再將事件加入進(jìn)去：

iview+Vue多級(jí)菜單的聯(lián)動(dòng)

用最笨的方式寫了一個(gè)三級(jí)菜單的聯(lián)動(dòng)

關(guān)于“vue+iview的菜單與頁(yè)簽如何聯(lián)動(dòng)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue+iview的菜單與頁(yè)簽如何聯(lián)動(dòng)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。