1、vue實(shí)現(xiàn)動(dòng)態(tài)路由詳細(xì)目錄、前端控制&1、在routerj或件（把靜態(tài)路由和動(dòng)態(tài)路由分別寫在routerjS、storeerss在vuei維護(hù)一個(gè)stte通過(guò)配角色來(lái)控制菜單顯不顯示&、srersso.js:、側(cè)邊欄的可以從vue里面取數(shù)據(jù)來(lái)進(jìn)行渲染二、后端控制路由1、storeerss在vujs里面發(fā)送請(qǐng)求獲取數(shù)據(jù)o、整理一份數(shù)據(jù)結(jié)構(gòu)，存到表里c、寫一個(gè)轉(zhuǎn)化方法，把獲取到的數(shù)據(jù)轉(zhuǎn)換成oute結(jié)構(gòu)主流的實(shí)現(xiàn)方式：簡(jiǎn)單聊一下兩種方式的優(yōu)勢(shì)，畢竟如果你從來(lái)沒(méi)做過(guò)，說(shuō)再多也看不明白，還是得看代碼前端控制不用后端幫助，路由表維護(hù)在前端邏輯相對(duì)比較簡(jiǎn)單，比較容易上手后端控制相對(duì)更安全一點(diǎn)-路由表維護(hù)在數(shù)

2、據(jù)庫(kù)一、前端控制思路：在路由配置里，通過(guò)et屬性，擴(kuò)展權(quán)限相關(guān)的字段，在路由守衛(wèi)里通過(guò)判斷這個(gè)權(quán)限標(biāo)識(shí)，實(shí)現(xiàn)路由的動(dòng)態(tài)增加，及頁(yè)面跳轉(zhuǎn)；女如我們?cè)黾右粋€(gè)ro字段來(lái)控制角色具體方案：1、根據(jù)登錄用戶的賬號(hào)，返回前端用戶的角色2前端根據(jù)用戶的角色，跟路由表的et.ro進(jìn)行匹配、講匹配到的路由形成可訪問(wèn)路由核心代碼邏輯1、在router懐件（把靜態(tài)路由和動(dòng)態(tài)路由分別寫在router.jsortuerovueortouterromvue-routerVue.use(Router)ortoutrolayoutost靜態(tài)路由ut主要是登錄頁(yè)、0頁(yè)、等不需要?jiǎng)討B(tài)的路由eortostosttRoutes=tr

3、erect,ooetayout,etruechildren:path:/redirect/:path*,component:()=import(/view/redireort(/views/loentrueimport(/views/error/404)import(/views/error/401)path:/404component:()hidden:truepath:/401component:()hidden:true/asno動(dòng)態(tài)S路由exportonstasnoutespat/permissionomponentaoutreiret/permission/paeaasotruena

4、me:Permission,meta:title:Permission,icon:lock,核心代碼，可以通過(guò)配的角色來(lái)進(jìn)行遍歷，從而是否展示這個(gè)意思就是amineito這兩個(gè)角色，這個(gè)菜單是可以顯示roles:admin,editorchildren:path:page,component:()=import(/views/permission/page)name:PagePermission,meta:title:PagePermission,這個(gè)意思就是只有ami能展示roles:adminonstcreateRouter=()=newRouter(scrollBehavior:()=(

5、y0)routes:constantRoutes)constrouter=createRouter()/這個(gè)是重置路由用的，很有用，別看這么幾行代碼exportfunctionresetRouter()constnewRouter=createRouter()router.matcher=newRouter.matcherexportdefaultrouter2、store/permission.js(在vuex維護(hù)一個(gè)state通過(guò)配角色來(lái)控制菜單顯不顯示)importasyncRoutes,constantRoutesfrom/router/這個(gè)方法是用來(lái)把角色和route.meta.ro

6、來(lái)進(jìn)行匹配functionhasPermission(roles,route)if(route.meta&route.meta.roles)returnroles.some(role=route.meta.roles.includes(role)elsereturntrue/這個(gè)方法是通過(guò)遞歸來(lái)遍歷路由，把有權(quán)限的路由給遍歷出來(lái)exportfunctionfilterAsyncRoutes(routes,roles)constres=routes.forEach(route=consttmp=.routeif(hasPermission(roles,tmpif(tmp.children)tmp

7、.children=filterAsyncRoutes(tmp.children,rolesres.push(tmp)returnresconststate=routes:dRoutes:constmutationsSET_ROUTES:(state,routes)=這個(gè)地方維護(hù)了兩個(gè)狀態(tài)一個(gè)是o,-e個(gè)是roese.addRoutes=routese.routes=constantRoutes.concat(routesconstactionsgenerateRoutes(commit,roles)returnnewPromise(resolve=etccessedRoutesi(roles

8、.incles(admin)ccessedRoues=asyncRouteselse核心代碼，把路由和獲取到的角色后臺(tái)獲取的傳進(jìn)去進(jìn)行匹配accessedRoutes=filterAsyncRoutes(asyncRoutes,roes把匹配完有權(quán)限的路由給se到里面commit(SET_Rccesseoesresolve(accessedRoutes)eporenmespceresemionscions3、src/permission.js(新建一個(gè)路由守衛(wèi)函數(shù)，可以在minjs也可以抽離出來(lái)一個(gè)文件)這里面的代碼主要是控制路由跳轉(zhuǎn)之前，先查一下有哪些可訪問(wèn)的路由，登錄以后跳轉(zhuǎn)的邏輯可以在這

9、個(gè)地方寫/permission.jsrouter.ifieforeEacstore.get(to.panext(else(to,from,判斷是否孫noen/log/ne/in判斷當(dāng)前用戶是否已拉取完if(store.getstore.dispatconstro把獲取到的ro/傳進(jìn)去進(jìn)行匹配，生成可以訪問(wèn)的路由store.dispatch(GenerateR動(dòng)態(tài)添加可訪問(wèn)路由表(核心代碼，沒(méi)有它啥也干不了)router.addRoutes(store.geore.serirf言息ersroes.enc拉取innooesres.rohen(rese;outesers./rolesoutersen

10、方法確保/o已完成成neorepceueenuefaultvese=iound-extvauue-openedive-text-se-trde=vervariables.menuBgles.emenuTextvariables.falsemenuActiveTexeevueue:key=routeeeu獲取有權(quán)限的路由ueeu.$router.opoutes把取到的路由進(jìn)行循環(huán)作為參數(shù)傳給子組件em=routelayoutemplateidebar-itev-for=chi:key=chil:is-nest=:item=chi:base-pathclass=neseueresolvePmenu

11、temvuetem.meenem.mee=iteconsoleelse當(dāng)有用戶又限的時(shí)候，說(shuō)明所有可訪問(wèn)路由已生成如訪問(wèn)沒(méi)權(quán)限的全面會(huì)自動(dòng)進(jìn)入4頁(yè)面eee在免登錄白名單，直接進(jìn)入exeeex否則全部重定向到登錄頁(yè)4、側(cè)邊欄的可以從vue鹿面取數(shù)據(jù)來(lái)進(jìn)行渲染核心代碼是從u取可以用的路由對(duì)象，來(lái)進(jìn)行側(cè)邊欄的渲染，不管是前端動(dòng)態(tài)加載還是后端動(dòng)態(tài)加載路由，這個(gè)代碼都是一樣的ents/siderbar.vuetiveMenupseTOC o 1-5 h zueeeeeeueueeeeeueeeeu前端控制路由，邏輯相對(duì)簡(jiǎn)單，后端只需要存這個(gè)用戶的角色就可以了，前端拿用戶的角色進(jìn)行匹配。但是如果新增角色，

12、就會(huì)非常痛苦，每一個(gè)都要加。、后端控制路由后端控制大致思路是：路由配置放在數(shù)據(jù)庫(kù)表里，用戶登錄成功后，根據(jù)角色權(quán)限，把有權(quán)限的菜單傳給前端，前端格式化成頁(yè)面路由識(shí)別的結(jié)構(gòu)，再渲染到頁(yè)面菜單上；用戶登錄以后，后端根據(jù)該用戶的角色，直接生成可訪問(wèn)的路由數(shù)據(jù)，注意這個(gè)地方是數(shù)據(jù)-前端根據(jù)后端返回的路由數(shù)據(jù)，轉(zhuǎn)成自己需要的路由結(jié)構(gòu)具體邏輯：router.j里面只放一些靜態(tài)的路由，、in之類*整理一份數(shù)據(jù)結(jié)構(gòu)，存到表里*從后端獲取路由數(shù)據(jù)，寫一個(gè)數(shù)據(jù)轉(zhuǎn)換的方法，講數(shù)據(jù)轉(zhuǎn)成可訪問(wèn)的路由也是維護(hù)一個(gè)vueXl犬態(tài)，將轉(zhuǎn)換好的路由存至Uvuex里面*側(cè)邊欄也是從路由取數(shù)據(jù)進(jìn)行渲染因?yàn)榍岸慰刂坪秃蠖丝刂?，后面?/p>

13、流程大部分都是一樣的，所以這個(gè)地方只看看前面不一樣的流程1、store/permission.js，在vueX里面發(fā)送請(qǐng)求獲取數(shù)據(jù)enerateRoutes(commit,data)returnneromise(resolve,reject)、etRoute(data).then(res=將獲取到的數(shù)據(jù)進(jìn)行一個(gè)轉(zhuǎn)換，然后存到vuex里constaccessedRouters=arrayToMenu(res.data)accessedRouters.concat(path:*,redirect:/commit(,accessedRouters)resolve().catch(error=reje

14、ct(error)entrue2、整理一份數(shù)據(jù)結(jié)構(gòu)，存到表里/頁(yè)面路由格式path:/form,component:Layoutchildren:path:index,name:Form,componentimport(/views/form/indexmeta:title:Form,icon:form/整理后的數(shù)據(jù)格式/一級(jí)菜單/prente的就可以當(dāng)做一級(jí)菜單，i最好是可以選位數(shù)，至于為什么等你開發(fā)項(xiàng)目的時(shí)候就知道了i1parentId:0菜單管理pt/menuienseomponentnuhidden:falsename:menu/級(jí)菜單/prer不為的，就可以拿prent跟一級(jí)菜單的i

15、去匹配，匹配上的就pus到i里面hi1parentId:1磚單seenath:menuItemooete要跟本地的UI件也址匹配上eeeeute3、寫一個(gè)轉(zhuǎn)化方法，把獲取到的數(shù)據(jù)轉(zhuǎn)換成router結(jié)構(gòu)eortutoarrayToMenu(arrotoe獲取頂級(jí)節(jié)點(diǎn)for(leti=0array，lengtotroarray這個(gè)e方法就是判斷下有沒(méi)有子級(jí)(!exists(array,row.parentodes.push(e路由名稱eettttero就是顯示的名字oroame路由的roreretorerett路由地址te全部trub就行，如果后端沒(méi)配oo一般就是匹配你交件t的ooettitleottoorray，from(oeetoDo，length)otoetoDo，sht獲取子節(jié)點(diǎn)oretarray，leotrorr等于哪個(gè)父級(jí)的,就u到哪個(gè)(row，paretoeonstchpath:ro