Vue3動(dòng)態(tài)路由和菜單普通來說，

網(wǎng)易微專業(yè)安卓高級(jí)開發(fā)工程師和廣泛的

download：https://www.51xuebc.com/thread-492-1-1.html

備用：3w 51xuebc com

前端項(xiàng)目中的道路很可能需求動(dòng)態(tài)注冊(cè)。由于菜單可能在管理系統(tǒng)中維護(hù)，并與權(quán)限綁定，用戶需求在登錄后動(dòng)態(tài)顯現(xiàn)菜單。菜單通常鏈接到路由，因而路由需求動(dòng)態(tài)注冊(cè)。
詳細(xì)怎樣完成？想法是系統(tǒng)只提供默許道路。登錄后，讀入菜單/道路數(shù)據(jù)并加載。其中，默許路由可能與動(dòng)態(tài)路由堆疊。處理辦法是掩蓋。在數(shù)據(jù)構(gòu)造上，菜單和路由數(shù)據(jù)是二合一的。
一、項(xiàng)目構(gòu)造這是我們一個(gè)項(xiàng)目的通用框架的代碼構(gòu)造。我們打算將詳細(xì)業(yè)務(wù)系統(tǒng)的代碼存儲(chǔ)在src/modules/中，而外部代碼是相對(duì)穩(wěn)定且可重用的框架代碼。二、默許路由Src/router/default.js，內(nèi)容較少，只要登錄、主頁和404。剩下的就靠動(dòng)態(tài)注冊(cè)了。
在路由項(xiàng)中，自定義屬性放在meta中。動(dòng)態(tài)路由的數(shù)據(jù)構(gòu)造與默許路由的數(shù)據(jù)構(gòu)造分歧。

/***默許道路*詳細(xì)的效勞路由應(yīng)該在src/modules/router中定義，或者從后端動(dòng)態(tài)加載。*/導(dǎo)出默許值[/***工藝道路項(xiàng)目構(gòu)造:*{途徑:"/"，//途徑，(必選；途徑、稱號(hào)和組件是路由規(guī)則的必需元素)也能夠帶參數(shù)，比方path: "/resource/detail/:id "，稱號(hào):“道路的稱號(hào)，這是道路的獨(dú)一標(biāo)識(shí)符”，(必需)組件:指向一個(gè)組件，比方Home，或者()= > import(“../views/login/pageindex.vue ")，(必需)Meta:{//Meta中的屬性能夠自定義，都是可選的。text:“name”，//顯現(xiàn)在菜單中，(可選)Navi: true，//導(dǎo)航欄(一級(jí)菜單)，(可選)NoLogin: true，//不用登錄就能夠閱讀，(可選)Access: "work: sysmanage，work:resource manage " ,//權(quán)限ID，(可選)},孩子:[]，},*/{途徑:"/登錄"，稱號(hào):“登錄”，組件:()= >導(dǎo)入("../views/login/PageIndex.vue ")，元:{NoLogin: true，//不用登錄就能夠閱讀。},},{途徑:"/"，稱號(hào):“家”，組件:()= >導(dǎo)入("../views/PageIndex.vue ")，},{途徑:"/notAllow "，稱號(hào):“不允許”，組件:()= >導(dǎo)入("../views/sys/notAllow.vue ")，},];
export const HomeName = " Home
三。動(dòng)態(tài)注冊(cè)什么時(shí)分注銷？我能在哪里注冊(cè)？如何注冊(cè)？
答:登錄后注冊(cè)；在路由維護(hù)中注冊(cè)；用router.addRoute()逐一添加。
1.登錄后注冊(cè)，在路由守護(hù)中注冊(cè)。
所謂路由衛(wèi)士，就是路由規(guī)則。這個(gè)名字是我從網(wǎng)上抄的。
src/路由器/index.js
從“vue-router”導(dǎo)入{ createRouter，createWebHashHistory }；從" "導(dǎo)入道路。/default "；從“”導(dǎo)入routeAssembler。/setup "；從“@/utils/login.js”導(dǎo)入{ has authority }；
const router = createRouter({history: createWebHashHistory()，道路，});
//路由維護(hù)讓registerRouteFresh = true//能否還沒有動(dòng)態(tài)加載router.beforeEach((to，from，)=> {const is login = local storage . is login？真:假；if (isLogin) {//登錄時(shí)考證權(quán)限設(shè)is access = hasAuthority(to . meta . access)；假如(！IsAccess) {//沒有權(quán)限下一步("/notAllow ")；返回；}If (registerRouteFresh) {//尚未動(dòng)態(tài)加載。//動(dòng)態(tài)注冊(cè)路由routeAssembler(路由器)；registerRouteFresh = false下一個(gè)({...to，replace:true })；}否則{//您曾經(jīng)登錄。您不能再次翻開登錄頁面。to.path === "/login "？next(" home "):next()；}}否則{//不需求登錄就直接翻開，否則進(jìn)入登錄頁面。to . meta . nologin | | to . path = = = "/log in "？next():next("/log in ")；}});
導(dǎo)出默許路由器；

2.如何動(dòng)態(tài)注冊(cè)？Src/router/setup.js，也就是上面例子中的routeAssembler:
/*路由和菜單*/從“”導(dǎo)入修復(fù)項(xiàng)目。/default "；//默許路由從“”導(dǎo)入{ HomeName }。/default "；//統(tǒng)一命名首頁路由項(xiàng)(參照之前的默許路由)從“@/模塊/路由器”導(dǎo)入項(xiàng)目項(xiàng)；//詳細(xì)業(yè)務(wù)系統(tǒng)的路由
導(dǎo)出默許值(路由器)=> {//獲取動(dòng)態(tài)路由const dyna items = getDynamicItems()；
//對(duì)齊首頁(統(tǒng)一命名首頁)adpatHome(HomeName，dyna items)；
//添加動(dòng)態(tài)路由dynaItems.forEach((值)=> {router.addRoute(值)；});};
const getDynamicItems = () => {/*獲取動(dòng)態(tài)路由，從指定文件加載或從后端獲取。*/返回projectItems};
//默許路由與效勞路由主頁的路由信息對(duì)齊。//所謂對(duì)齊，就是大家的名字分歧，這樣才干保證動(dòng)態(tài)添加的路由項(xiàng)掩蓋之前途徑和名字相同的路由。const adpatHome = (HomeName，)=> {let home = dyna items . filter((item)= > {return item . path = = = "/"；});if (home.length > 0 && home[0])。名字！== HomeName) {/***假如效勞路由定義了主頁，但其稱號(hào)不同于默許路由主頁的稱號(hào)。*效勞道路中第一頁項(xiàng)目的稱號(hào)被設(shè)置為默許稱號(hào)。*由于依據(jù)vue-router的規(guī)則，在添加路由的時(shí)分，假如有相同稱號(hào)相同途徑的addRoute項(xiàng)，就掩蓋它。*我們想要的是掩蓋默許設(shè)置，這取決于業(yè)務(wù)路由設(shè)置。*/首頁[0]。name = HomeName}};
有一個(gè)問題是，假如動(dòng)態(tài)路由與默許路由有相同的路由項(xiàng)，該如何處置。
依據(jù)vue3的addRouter規(guī)則，假如添加的路由項(xiàng)只是途徑相同但稱號(hào)不同，則不是相同的路由項(xiàng)。添加route()后，原來的路由項(xiàng)依然有效。但是，假如途徑和稱號(hào)都相同，原始的將被掩蓋(我疑心相同的稱號(hào)將被掩蓋)。所以默許路由中有一個(gè)主頁路由，指向幀代碼中的默許主頁；加載動(dòng)態(tài)路由后，該路由將被掩蓋，并指向特定業(yè)務(wù)系統(tǒng)的主頁。這也意味著我們不需求手動(dòng)刪除已加載的同名路由項(xiàng)。其實(shí)刪除也會(huì)出錯(cuò)。