## 一、概述 現實業務中，存在這樣的場景，系統的路由和菜單會根據用戶的角色變化而變化，或者路由菜單根據用戶的；前端提供了一套完整的異步加載方案， 可以讓你很方便的從服務端加載路由和菜單配置，并應用到系統中； ## 二、動態加載路由 ### 1）、開啟異步路由設置 在`/config/config.js`文件中設置`asyncRoutes`的值為 true；  ### 2）、注冊路由組件 基礎路由組件包含路由基本配置和對應的視圖組件，統一在`/router/async/router.map.js`文件中注冊它們。它和正常的路由配置基本無異，相當于把完整的路由拆分成單個的路由配置進行注冊，為后面的路由動態配置打好基礎； 一個單獨的路由組件注冊示例如下： ~~~ registerName: { //路由組件注冊名稱，唯一標識 path: 'path', //路由path，可缺省，默認取路由注冊名稱 registerName 的值 name: '演示頁', //路由名稱 redirect: '/login', //路由重定向 component: () => import('@/pages/demo'), //路由視圖 icon: 'permission', //路由的菜單icon，會注入到路由元數據meta中 invisible: false, //是否隱藏菜單項，true 隱藏，false 不隱藏，會注入到路由元數據meta中。 authority: { //路由權限配置，會注入到路由元數據meta中。可缺省，默認為 ‘*’, 即無權限限制 permission: 'form', //路由需要的權限 role: 'admin' //路由需要的角色。當permission未設置，通過 role 檢查權限 }, page: { //路由的頁面數據，會注入到路由元數據meta中 title: '演示頁', //頁面標題 breadcrumb: ['首頁', '演示頁'] //頁面面包屑 } } ~~~ ### 3）、配置基本路由 如果沒有任何路由，你的應用是無法訪問的，所以我們需要在本地配置一些基本的路由，比如登錄頁、404、403 等。你可以在`/router/async/config.async.js`文件中配置一些本地必要的路由； ~~~ const routesConfig = [ 'login', //匹配 router.map.js 中注冊的 registerName = login 的路由 'root', //匹配 router.map.js 中注冊的 registerName = root 的路由 { router: 'exp404', //匹配 router.map.js 中注冊的 registerName = exp404 的路由 path: '*', //重寫 exp404 路由的 path 屬性 name: '404' //重寫 exp404 路由的 name 屬性 }, { router: 'exp403', //匹配 router.map.js 中注冊的 registerName = exp403 的路由 path: '/403', //重寫 exp403 路由的 path 屬性 name: '403' //重寫 exp403 路由的 name 屬性 } ] ~~~ 完成配置后，即可通過`routesConfig`和已注冊的`routerMap`生成[router.options.routes](https://router.vuejs.org/zh/api/#router-%E6%9E%84%E5%BB%BA%E9%80%89%E9%A1%B9)配置如下； ~~~ const options = { routes: parseRoutes(routesConfig, routerMap) } ~~~ 完成以上設置后，本地就已經有了包含 login、404、403 頁面的路由，并且這些路由是可以直接訪問的； ### 4）、異步獲取路由配置 當用戶登錄后（或者其它的前提條件），你可能想根據不同用戶加載不同的路由和菜單。 那么我們就需要先從后端服務獲取異步路由配置，后端返回的異步路由配置`routesConfig`是一個異步路由配置數組， 應當如下格式： ~~~ [{ router: 'root', //匹配 router.map.js 中注冊名 registerName = root 的路由 children: [ //root 路由的子路由配置 { router: 'dashboard', //匹配 router.map.js 中注冊名 registerName = dashboard 的路由 children: ['workplace', 'analysis'], //dashboard 路由的子路由配置，依次匹配 registerName 為 workplace 和 analysis 的路由 }, { router: 'form', //匹配 router.map.js 中注冊名 registerName = form 的路由 children: [ //form 路由的子路由配置 'basicForm', //匹配 router.map.js 中注冊名 registerName = basicForm 的路由 'stepForm', //匹配 router.map.js 中注冊名 registerName = stepForm 的路由 { router: 'advanceForm', //匹配 router.map.js 中注冊名 registerName = advanceForm 的路由 path: 'advance' //重寫 advanceForm 路由的 path 屬性 } ] }, { router: 'basicForm', //匹配 router.map.js 中注冊名 registerName = basicForm 的路由 name: '驗權表單', //重寫 basicForm 路由的 name 屬性 icon: 'file-excel', //重寫 basicForm 路由的 icon 屬性 authority: 'form' //重寫 basicForm 路由的 authority 屬性 } ] }] ~~~ 其中`router`屬性 對應`router.map.js`中已注冊的`基礎路由`的注冊名稱`registerName`，`children`屬性為路由的嵌套子路由配置； ### 5）、加載路由并應用 提供了一個路由加載工具，只需調用`/utils/routerUtil.js`中的`loadRoutes`方法加載上一步獲取到的`routesConfig`即可，如下： ~~~ getRoutesConfig().then(result => { const routesConfig = result.data.data loadRoutes(routesConfig) }) ~~~ 至此，異步路由的加載就完成了，你可以訪問異步加載的路由了。 ## 三、動態加載菜單 前端的菜單，是根據路由配置自動生成的，默認獲取根路由`‘/’`下所有子路由作為菜單配置； >[danger] 當你完成了異步路由的加載，菜單也會隨之改變，無需你做其它額外的操作。 主要代碼如下： ~~~ // 初始化Admin后臺菜單數據 const rootRoute = router.options.routes.find(item => item.path === '/') const menuRoutes = rootRoute && rootRoute.children if (menuRoutes) { mergeI18nFromRoutes(i18n, menuRoutes) store.commit('setting/setMenuData', menuRoutes) } ~~~