這一篇繼續(xù)記錄生成測(cè)試頁(yè)面、路由表、根據(jù)store中routes生成導(dǎo)航菜單。

1. 按照本測(cè)試項(xiàng)目左側(cè)菜單結(jié)構(gòu)在views目錄下生成對(duì)應(yīng)頁(yè)面組件，同時(shí)在router/index.js中添加對(duì)應(yīng)路由規(guī)則，路由表中meta用于后面生成菜單時(shí)的icon圖標(biāo)和權(quán)限控制，這里可以先不管。圖中框起的監(jiān)控總菜單為示例 頁(yè)面菜單-views下頁(yè)面組件-對(duì)應(yīng)路由 3者間關(guān)系，“配置”總菜單類(lèi)似。

2. 上面把測(cè)試頁(yè)面都準(zhǔn)備好了，現(xiàn)在處理根據(jù)路由表生成左側(cè)菜單。

按照需不需要權(quán)限控制，把所有路由表分成2塊：constantRoutes表示不需要權(quán)限控制能直接訪問(wèn)的頁(yè)面（該測(cè)試項(xiàng)目只有/login不需要），asyncRoutes表示需要權(quán)限控制的頁(yè)面（把/404和 * 兩個(gè)路由放到數(shù)組最后）（操作之后只有/login能訪問(wèn)了，訪問(wèn)其他路由將是空白頁(yè)）。并export暴露出去，使用vuex引入這兩塊路由，方便處理動(dòng)態(tài)路由和生成動(dòng)態(tài)菜單。這一步為了測(cè)試暫時(shí)把new VueRouter時(shí)掛載的routes為所有路由，Store中routes也為所有路由，后續(xù)將根據(jù)用戶(hù)角色修改這2處。

3. 在之前創(chuàng)建的layout目錄的SideBar組件中引用store中的routes，并生成需要的路由結(jié)構(gòu)。

這一步涉及組件遞歸和點(diǎn)擊跳轉(zhuǎn)，在工作的項(xiàng)目中首次處理時(shí)沒(méi)有思緒花費(fèi)了大量時(shí)間，后續(xù)看網(wǎng)上各大神的文章慢慢領(lǐng)悟便有了自己的思路。根據(jù)路由處理成菜單有多種實(shí)現(xiàn)思路，這里只是簡(jiǎn)單的實(shí)現(xiàn)。

這里直接貼上菜單組件代碼：

這里需要注意的有下面幾點(diǎn)：

• <el-menu 組件中

• :router="true"啟用vue-router模式點(diǎn)擊就能導(dǎo)航。需要結(jié)合 <el-menu 組件的:index屬性綁定為路由path

• :default-active="activeMenu"處理菜單高亮，直接用當(dāng)前路由path；但是像/device/detail這類(lèi)子頁(yè)面因?yàn)槁酚杀硖砑恿薶idden屬性，并沒(méi)有渲染到菜單欄中，所以用meta中的activeMenu屬性(值為父級(jí)路由path)進(jìn)行處理

• <SideBarItem

• :base-path="item.path"? 該組件遞歸，base-path表示當(dāng)前層的路由path

• 遞歸的組件需要添加 name 屬性，平時(shí)寫(xiě)組件時(shí)應(yīng)該養(yǎng)成寫(xiě)name的習(xí)慣

• <Menu-item組件

• :index="item.path=='/'?'/':basePath+'/'+item.path"? ?組件遞歸時(shí)，上級(jí)路由path+本級(jí)路由path；導(dǎo)致根路由/多次添加變成“///”所以這里進(jìn)行判斷處理

之后便能根據(jù)store中的routes循環(huán)生成多層次的導(dǎo)航菜單。

下篇文章繼續(xù)記錄用戶(hù)登錄拿到token和roles來(lái)過(guò)濾routes動(dòng)態(tài)生成菜單，并添加permission.js用router.beforeEach攔截處理路由權(quán)限。