chore: add configuration for async router; 🌟

src/config/default/setting.config.js

@@ -16,6 +16,7 @@ module.exports = {
   hideSetting: false,                   //隐藏设置抽屉，true:隐藏，false:不隐藏
   systemName: 'Vue Antd Admin',         //系统名称
   copyright: '2018 ICZER 工作室出品',    //copyright
+  asyncRoutes: true,                    //异步加载路由，true:开启，false:不开启
   animate: {                            //动画设置
     disabled: false,                    //禁用动画，true:禁用，false:启用
     name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+import {initRouter} from './router'
 import './theme/index.less'
 import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
@@ -11,7 +11,8 @@ import Plugins from '@/plugins'
 import {initI18n} from '@/utils/i18n'
 import bootstrap from '@/bootstrap'
 
-const i18n = initI18n(router, 'CN', 'US')
+const router = initRouter(store.state.setting.asyncRoutes)
+const i18n = initI18n('CN', 'US')
 bootstrap({router, store, i18n})
 
 Vue.config.productionTip = false

src/router/config.async.js

@@ -21,18 +21,4 @@ const options = {
   routes: parseRoutes(routesConfig, routerMap)
 }
 
-// 不需要登录拦截的路由配置
+export default options
-const loginIgnore = {
-  names: ['404'],      //根据路由名称匹配
-  paths: ['/login'],   //根据路由fullPath匹配
-  /**
-   * 判断路由是否包含在该配置中
-   * @param route vue-router 的 route 对象
-   * @returns {boolean}
-   */
-  includes(route) {
-    return this.names.includes(route.name) || this.paths.includes(route.path)
-  }
-}
-
-export {options, loginIgnore}

src/router/config.js

@@ -1,4 +1,3 @@
-import Login from '@/pages/login/Login'
 import TabsView from '@/layouts/tabs/TabsView'
 import BlankView from '@/layouts/BlankView'
 import PageView from '@/layouts/PageView'
@@ -9,13 +8,18 @@ const options = {
     {
       path: '/login',
       name: '登录页',
-      component: Login
+      component: () => import('@/pages/login')
     },
     {
       path: '*',
       name: '404',
       component: () => import('@/pages/exception/404'),
     },
+    {
+      path: '/403',
+      name: '403',
+      component: () => import('@/pages/exception/403'),
+    },
     {
       path: '/',
       name: '首页',
@@ -24,7 +28,7 @@ const options = {
       children: [
         {
           path: 'demo',
-          name: '演示页0',
+          name: '演示页',
           meta: {
             icon: 'file-ppt'
           },
@@ -90,18 +94,4 @@ const options = {
   ]
 }
 
-// 不需要登录拦截的路由配置
+export default options
-const loginIgnore = {
-  names: ['404'],      //根据路由名称匹配
-  paths: ['/login'],   //根据路由fullPath匹配
-  /**
-   * 判断路由是否包含在该配置中
-   * @param route vue-router 的 route 对象
-   * @returns {boolean}
-   */
-  includes(route) {
-    return this.names.includes(route.name) || this.paths.includes(route.path)
-  }
-}
-
-export {options, loginIgnore}

src/router/index.js

@@ -1,10 +1,29 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-// import {options, loginIgnore} from './config'  //本地路由配置
-import {options, loginIgnore} from './config.async' //异步路由配置
 
 Vue.use(Router)
-const router =  new Router({...options})
 
-export {loginIgnore}
+// 不需要登录拦截的路由配置
-export default router
+const loginIgnore = {
+  names: ['404'],      //根据路由名称匹配
+  paths: ['/login'],   //根据路由fullPath匹配
+  /**
+   * 判断路由是否包含在该配置中
+   * @param route vue-router 的 route 对象
+   * @returns {boolean}
+   */
+  includes(route) {
+    return this.names.includes(route.name) || this.paths.includes(route.path)
+  }
+}
+
+/**
+ * 初始化路由实例
+ * @param isAsync 是否异步路由模式
+ * @returns {VueRouter}
+ */
+function initRouter(isAsync) {
+  const options = isAsync ? require('./config.async').default : require('./config').default
+  return new Router(options)
+}
+export {loginIgnore, initRouter}

src/store/modules/setting.js

@@ -50,6 +50,9 @@ export default {
     },
     setMenuData(state, menuData) {
       state.menuData = menuData
+    },
+    setAsyncRoutes(state, asyncRoutes) {
+      state.asyncRoutes = asyncRoutes
     }
   }
 }

src/utils/i18n.js

@@ -5,27 +5,19 @@ import './Objects'
 
 /**
  * 创建 i18n 配置
- * @param router 路由
  * @param locale 本地化语言
  * @param fallback 回退语言
  * @returns {VueI18n}
  */
-function initI18n(router, locale, fallback) {
+function initI18n(locale, fallback) {
   Vue.use(VueI18n)
-  const rootRoute = router.options.routes.find(item => item.path === '/')
-  const menuRoutes = rootRoute && rootRoute.children
   let i18nOptions = {
     locale,
     fallbackLocale: fallback,
     silentFallbackWarn: true,
     messages: routesI18n.messages
   }
-  const i18n = new VueI18n(i18nOptions)
+  return new VueI18n(i18nOptions)
-  if (menuRoutes) {
-    mergeI18nFromRoutes(i18n, menuRoutes)
-  }
-
-  return i18n
 }
 
 /**

src/utils/routerUtil.js

@@ -50,22 +50,30 @@ function parseRoutes(routesConfig, routerMap) {
  * @param router 应用路由实例
  * @param store 应用的 vuex.store 实例
  * @param i18n 应用的 vue-i18n 实例
- * @param routesConfig
+ * @param routesConfig 路由配置
  */
 function loadRoutes({router, store, i18n}, routesConfig) {
-  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
+  const asyncRoutes = store.state.setting.asyncRoutes
-  if (routesConfig) {
+  // 如果是开启了异步路由，则加载异步路由配置
-    store.commit('account/setRoutesConfig', routesConfig)
+  if (asyncRoutes) {
-  } else {
+    // 如果 routesConfig 有值，则更新到本地，否则从本地获取
-    routesConfig = store.getters['account/routesConfig']
+    if (routesConfig) {
+      store.commit('account/setRoutesConfig', routesConfig)
+    } else {
+      routesConfig = store.getters['account/routesConfig']
+    }
+    if (routesConfig && routesConfig.length > 0) {
+      const routes = parseRoutes(routesConfig, routerMap)
+      const finalRoutes = mergeRoutes(router.options.routes, routes)
+      router.options = {...router.options, routes: finalRoutes}
+      router.matcher = new Router({...router.options, routes:[]}).matcher
+      router.addRoutes(finalRoutes)
+    }
   }
-  if (routesConfig && routesConfig.length > 0) {
+  // 初始化Admin后台菜单数据
-    const routes = parseRoutes(routesConfig, routerMap)
+  const rootRoute = router.options.routes.find(item => item.path === '/')
-    const finalRoutes = mergeRoutes(router.options.routes, routes)
+  const menuRoutes = rootRoute && rootRoute.children
-    router.options = {...router.options, routes: finalRoutes}
+  if (menuRoutes) {
-    router.matcher = new Router({...router.options, routes:[]}).matcher
-    router.addRoutes(finalRoutes)
-    const menuRoutes = finalRoutes.find(item => item.path === '/').children
     mergeI18nFromRoutes(i18n, menuRoutes)
     store.commit('setting/setMenuData', menuRoutes)
   }
@@ -78,12 +86,9 @@ function loadRoutes({router, store, i18n}, routesConfig) {
  * @returns {Route[]}
  */
 function mergeRoutes(target, source) {
-  const targetMap = {}
+  const routesMap = {}
-  const sourceMap = {}
+  target.forEach(item => routesMap[item.path] = item)
-  target.forEach(item => targetMap[item.path] = item)
+  source.forEach(item => routesMap[item.path] = item)
-  source.forEach(item => sourceMap[item.path] = item)
-  const routesMap = {...targetMap}
-  Object.keys(sourceMap).forEach(key => routesMap[key] = sourceMap[key])
   return Object.values(routesMap)
 }