feat: add function of async router and async menu; 🌟

新增：异步路由和菜单功能；

src/router/config.async.js

@@ -0,0 +1,24 @@
+import routerMap from './router.map'
+import {parseRoutes} from '@/utils/routerUtil'
+
+// 异步路由配置
+const routesConfig = [
+  'login',
+  'root',
+  {
+    router: 'exp404',
+    path: '*',
+    name: '404'
+  },
+  {
+    router: 'exp403',
+    path: '/403',
+    name: '403'
+  }
+]
+
+const options = {
+  routes: parseRoutes(routesConfig, routerMap)
+}
+
+export default options

src/router/config.js

@@ -1,20 +1,25 @@
-import Login from '@/pages/login/Login'
 import TabsView from '@/layouts/tabs/TabsView'
 import BlankView from '@/layouts/BlankView'
 import PageView from '@/layouts/PageView'
 
+// 路由配置
 const options = {
   routes: [
     {
       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: '首页',
@@ -32,12 +37,12 @@ const options = {
             {
               path: 'workplace',
               name: '工作台',
-              component: () => import('@/pages/dashboard/workplace/WorkPlace'),
+              component: () => import('@/pages/dashboard/workplace'),
             },
             {
               path: 'analysis',
               name: '分析页',
-              component: () => import('@/pages/dashboard/analysis/Analysis'),
+              component: () => import('@/pages/dashboard/analysis'),
             }
           ]
         },
@@ -52,17 +57,17 @@ const options = {
             {
               path: 'basic',
               name: '基础表单',
-              component: () => import('@/pages/form/basic/BasicForm'),
+              component: () => import('@/pages/form/basic'),
             },
             {
               path: 'step',
               name: '分步表单',
-              component: () => import('@/pages/form/step/StepForm'),
+              component: () => import('@/pages/form/step'),
             },
             {
               path: 'advance',
               name: '高级表单',
-              component: () => import('@/pages/form/advance/AdvancedForm'),
+              component: () => import('@/pages/form/advance'),
             }
           ]
         },
@@ -197,24 +202,21 @@ const options = {
               component: () => import('@/pages/components/Palette')
             }
           ]
+        },
+        {
+          name: '验权表单',
+          path: 'auth/form',
+          meta: {
+            icon: 'file-excel',
+            authority: {
+              permission: 'form'
+            }
+          },
+          component: () => import('@/pages/form/basic')
         }
       ]
-    }
+    },
   ]
 }
 
-// 不需要登录拦截的路由配置
-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}
+export default options

src/router/index.js

@@ -1,19 +1,29 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import {checkAuthorization} from '@/utils/request'
-import {options, loginIgnore} from './config'
 
 Vue.use(Router)
 
-const router =  new Router(options)
-
-// 登录拦截
-router.beforeEach((to, from, next) => {
-  if (!loginIgnore.includes(to) && !checkAuthorization()) {
-    next({path: '/login'})
-  } else {
-    next()
+// 不需要登录拦截的路由配置
+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 default router
+/**
+ * 初始化路由实例
+ * @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/router/router.map.js

@@ -0,0 +1,154 @@
+// 视图组件
+const view = {
+  tabs: () => import('@/layouts/tabs'),
+  blank: () => import('@/layouts/BlankView'),
+  page: () => import('@/layouts/PageView')
+}
+
+// 路由组件注册
+const routerMap = {
+  login: {
+    authority: '*',
+    path: '/login',
+    component: () => import('@/pages/login')
+  },
+  root: {
+    path: '/',
+    name: '首页',
+    redirect: '/login',
+    component: view.tabs
+  },
+  dashboard: {
+    name: 'Dashboard',
+    component: view.blank
+  },
+  workplace: {
+    name: '工作台',
+    component: () => import('@/pages/dashboard/workplace')
+  },
+  analysis: {
+    name: '分析页',
+    component: () => import('@/pages/dashboard/analysis')
+  },
+  form: {
+    name: '表单页',
+    icon: 'form',
+    component: view.page
+  },
+  basicForm: {
+    path: 'basic',
+    name: '基础表单',
+    component: () => import('@/pages/form/basic')
+  },
+  stepForm: {
+    path: 'step',
+    name: '分步表单',
+    component: () => import('@/pages/form/step')
+  },
+  advanceForm: {
+    path: 'advance',
+    name: '高级表单',
+    component: () => import('@/pages/form/advance')
+  },
+  list: {
+    name: '列表页',
+    icon: 'table',
+    component: view.page
+  },
+  queryList: {
+    path: 'query',
+    name: '查询表格',
+    component: () => import('@/pages/list/QueryList')
+  },
+  primaryList: {
+    path: 'primary',
+    name: '标准列表',
+    component: () => import('@/pages/list/StandardList')
+  },
+  cardList: {
+    path: 'card',
+    name: '卡片列表',
+    component: () => import('@/pages/list/CardList')
+  },
+  searchList: {
+    path: 'search',
+    name: '搜索列表',
+    component: () => import('@/pages/list/search/SearchLayout')
+  },
+  article: {
+    name: '文章',
+    component: () => import('@/pages/list/search/ArticleList')
+  },
+  application: {
+    name: '应用',
+    component: () => import('@/pages/list/search/ApplicationList')
+  },
+  project: {
+    name: '项目',
+    component: () => import('@/pages/list/search/ProjectList')
+  },
+  details: {
+    name: '详情页',
+    icon: 'profile',
+    component: view.blank
+  },
+  basicDetails: {
+    path: 'basic',
+    name: '基础详情页',
+    component: () => import('@/pages/detail/BasicDetail')
+  },
+  advanceDetails: {
+    path: 'advance',
+    name: '高级详情页',
+    component: () => import('@/pages/detail/AdvancedDetail')
+  },
+  result: {
+    name: '结果页',
+    icon: 'check-circle-o',
+    component: view.page
+  },
+  success: {
+    name: '成功',
+    component: () => import('@/pages/result/Success')
+  },
+  error: {
+    name: '失败',
+    component: () => import('@/pages/result/Error')
+  },
+  exception: {
+    name: '异常页',
+    icon: 'warning',
+    component: view.blank
+  },
+  exp403: {
+    authority: '*',
+    name: 'exp403',
+    path: '403',
+    component: () => import('@/pages/exception/403')
+  },
+  exp404: {
+    name: 'exp404',
+    path: '404',
+    component: () => import('@/pages/exception/404')
+  },
+  exp500: {
+    name: 'exp500',
+    path: '500',
+    component: () => import('@/pages/exception/500')
+  },
+  components: {
+    name: '小组件',
+    icon: 'appstore-o',
+    component: view.page
+  },
+  taskCard: {
+    name: '任务卡片',
+    component: () => import('@/pages/components/TaskCard')
+  },
+  palette: {
+    name: '颜色复选框',
+    component: () => import('@/pages/components/Palette')
+  }
+}
+export default routerMap
+