家紡 網(wǎng)站建設(shè) 中企動(dòng)力,幫網(wǎng)站做代理,鄭州做商城網(wǎng)站,云電腦平臺(tái)哪個(gè)免費(fèi)[toc] 前言#xff1a;路由亂#xff0c;本質(zhì)是“頁(yè)面結(jié)構(gòu)沒(méi)設(shè)計(jì)” 很多項(xiàng)目后期路由文件看起來(lái)像這樣#xff1a; 一個(gè)文件 1000 行Layout 套 Layout新頁(yè)面不知道該放哪 說(shuō)白了就是一句話(huà)#xff1a;路由和頁(yè)面結(jié)構(gòu)是“邊寫(xiě)邊湊”的。一、Layout 的職責(zé)一定要收緊 一句話(huà)…[toc]前言路由亂本質(zhì)是“頁(yè)面結(jié)構(gòu)沒(méi)設(shè)計(jì)”很多項(xiàng)目后期路由文件看起來(lái)像這樣一個(gè)文件 1000 行Layout 套 Layout新頁(yè)面不知道該放哪說(shuō)白了就是一句話(huà)路由和頁(yè)面結(jié)構(gòu)是“邊寫(xiě)邊湊”的。一、Layout 的職責(zé)一定要收緊一句話(huà)定義 Layout只管結(jié)構(gòu)不管業(yè)務(wù)。Layout 里應(yīng)該有什么HeaderSidebarFooterrouter-view /不應(yīng)該有什么接口請(qǐng)求權(quán)限判斷業(yè)務(wù)狀態(tài)二、最推薦的 Layout 結(jié)構(gòu)Layout ├─ Header ├─ Sidebar └─ MainContent (router-view)這個(gè)結(jié)構(gòu)的好處是所有頁(yè)面共享結(jié)構(gòu)頁(yè)面只關(guān)心自己內(nèi)容三、路由如何“自動(dòng)套 Layout”{path:/,component:MainLayout,children:[{path:dashboard,component:Dashboard}]}這樣做的本質(zhì)是Layout 是路由的一部分而不是頁(yè)面自己引的組件四、多 Layout 怎么處理真實(shí)項(xiàng)目里幾乎一定有登錄頁(yè) Layout后臺(tái) Layout全屏頁(yè) Layout解決方式非常簡(jiǎn)單{path:/login,component:BlankLayout},{path:/,component:AdminLayout,children:[...]}你會(huì)發(fā)現(xiàn)頁(yè)面不需要知道自己用什么 Layout路由一眼就能看懂結(jié)構(gòu)五、菜單一定是“路由的衍生物”不要自己維護(hù)一份菜單數(shù)據(jù)。constmenusroutes.map(route({title:route.meta.title,path:route.path}))這樣做的好處是權(quán)限變了菜單自然變不存在“菜單有頁(yè)面進(jìn)不去”六、路由文件一定要拆模塊router/ ├─ index.ts ├─ modules/ │ ├─ user.ts │ ├─ order.ts │ └─ admin.ts每個(gè)模塊只關(guān)心自己新功能 新文件刪除模塊 刪文件七、總結(jié)一句話(huà)路由是頁(yè)面結(jié)構(gòu)的說(shuō)明書(shū)不是業(yè)務(wù)代碼的垃圾桶。