新增路由、异常页

src/components/dashboard/Dashboard.vue

@@ -123,7 +123,6 @@ import RankingList from '../chart/RankingList'
 import HotSearch from '../analysis/HotSearch'
 import SalesData from '../analysis/SalesData'
 
-
 const rankList = []
 
 for (let i = 0; i < 8; i++) {

src/components/exception/403.vue

@@ -0,0 +1,14 @@
+<template>
+  <exception-page type="403" />
+</template>
+
+<script>
+import ExceptionPage from './ExceptionPage'
+export default {
+  components: {ExceptionPage}
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/exception/404.vue

@@ -0,0 +1,14 @@
+<template>
+  <exception-page type="404" />
+</template>
+
+<script>
+import ExceptionPage from './ExceptionPage'
+export default {
+  components: {ExceptionPage}
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/exception/500.vue

@@ -0,0 +1,14 @@
+<template>
+    <exception-page type="500" />
+</template>
+
+<script>
+import ExceptionPage from './ExceptionPage'
+export default {
+  components: {ExceptionPage}
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/exception/Exception.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'Exception'
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/exception/ExceptionPage.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="exception">
+    <div class="img">
+      <img :src="config[type].img" />
+      <!--<div class="ele" :style="{backgroundImage: `url(${config[type].img})`}"/>-->
+    </div>
+    <div class="content">
+      <h1>{{config[type].title}}</h1>
+      <div class="desc">{{config[type].desc}}</div>
+      <div class="action">
+        <a-button type="primary" >返回首页</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AButton from 'vue-antd-ui/es/button/button'
+import Config from './typeConfig'
+
+export default {
+  name: 'ExceptionPage',
+  props: ['type'],
+  components: {AButton},
+  data () {
+    return {
+      config: Config
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .exception{
+    min-height: 500px;
+    height: 80%;
+    align-items: center;
+    text-align: center;
+    margin-top: 150px;
+    .img{
+      display: inline-block;
+      padding-right: 52px;
+      zoom: 1;
+      img{
+        height: 360px;
+        max-width: 430px;
+      }
+    }
+    .content{
+      display: inline-block;
+      flex: auto;
+      h1{
+        color: #434e59;
+        font-size: 72px;
+        font-weight: 600;
+        line-height: 72px;
+        margin-bottom: 24px;
+      }
+      .desc{
+        color: rgba(0,0,0,.45);
+        font-size: 20px;
+        line-height: 28px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+</style>

src/components/exception/typeConfig.js

@@ -0,0 +1,19 @@
+const config = {
+  403: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    title: '403',
+    desc: '抱歉，你无权访问该页面'
+  },
+  404: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    title: '404',
+    desc: '抱歉，你访问的页面不存在或仍在开发中'
+  },
+  500: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    title: '500',
+    desc: '抱歉，服务器出错了'
+  }
+}
+
+export default config

src/components/layout/GloablLayout.vue

@@ -33,33 +33,7 @@ const ALayoutContent = ALayout.Content
 const ALayoutFooter = ALayout.Footer
 const minHeight = window.innerHeight - 64 - 48
 
-const menuData = [
-  {
-    title: '统计分析',
-    path: '/dashboard'
-  },
-  {
-    title: '图表',
-    path: '/chart',
-    icon: 'line-chart'
-  },
-  {
-    title: '报表系统'
-  },
-  {
-    title: '日志',
-    children: [
-      {
-        title: '日志分析',
-        icon: 'none'
-      },
-      {
-        title: '数据分析',
-        icon: 'none'
-      }
-    ]
-  }
-]
+let menuData = []
 
 export default {
   name: 'GloablLayout',
@@ -84,6 +58,9 @@ export default {
     toggleCollapse () {
       this.collapsed = !this.collapsed
     }
+  },
+  beforeCreate () {
+    menuData = this.$router.options.routes
   }
 }
 </script>

src/components/menu/menu.js

@@ -65,7 +65,7 @@ export default {
             {attrs: {href: '#' + menu.path}},
             [
               this.renderIcon(h, menu.icon),
-              h('span', [menu.title])
+              h('span', [menu.name])
             ]
           )
         ]
@@ -77,7 +77,7 @@ export default {
         {slot: 'title'},
         [
           this.renderIcon(h, menu.icon),
-          h('span', [menu.title])
+          h('span', [menu.name])
         ]
       )]
       var itemArr = []

src/router/index.js

@@ -1,26 +1,144 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Dashboard from '@/components/dashboard/Dashboard'
-import MiniArea from '@/components/chart/MiniArea'
+import Exception from '@/components/exception/Exception'
+import NotFound from '@/components/exception/404'
+import NotPermit from '@/components/exception/403'
+import ServerError from '@/components/exception/500'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
-      path: '/',
-      name: 'hello',
-      component: Dashboard
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: Dashboard,
+      icon: 'dashboard'
     },
     {
-      path: '/dashboard',
-      name: 'dashboard',
-      component: Dashboard
+      path: '/form',
+      name: '表单页',
+      component: Exception,
+      icon: 'form',
+      children: [
+        {
+          path: '/form/basic',
+          name: '基础表单',
+          component: NotFound,
+          icon: 'none'
+        },
+        {
+          path: '/form/step',
+          name: '分步表单',
+          component: NotFound,
+          icon: 'none'
+        },
+        {
+          path: '/form/advanced',
+          name: '高级表单',
+          component: NotFound,
+          icon: 'none'
+        }
+      ]
+    },
+    {
+      path: '/list',
+      name: '列表页',
+      component: Exception,
+      icon: 'table',
+      children: [
+        {
+          path: '/form/query',
+          name: '查询表格',
+          component: NotFound,
+          icon: 'none'
+        },
+        {
+          path: '/form/primary',
+          name: '标准表格',
+          component: NotFound,
+          icon: 'none'
+        },
+        {
+          path: '/form/card',
+          name: '卡片表格',
+          component: NotFound,
+          icon: 'none'
+        },
+        {
+          path: '/form/search',
+          name: '搜索表格',
+          component: NotFound,
+          icon: 'none'
+        }
+      ]
+    },
+    {
+      path: '/detail',
+      name: '详情页',
+      icon: 'profile',
+      component: Exception,
+      children: [
+        {
+          path: '/detail/basic',
+          name: '基础详情页',
+          icon: 'none',
+          component: NotFound
+        },
+        {
+          path: '/detail/advanced',
+          name: '高级详情页',
+          icon: 'none',
+          component: NotFound
+        }
+      ]
+    },
+    {
+      path: '/result',
+      name: '详情页',
+      icon: 'check-circle-o',
+      component: Exception,
+      children: [
+        {
+          path: '/result/success',
+          name: '成功',
+          icon: 'none',
+          component: NotFound
+        },
+        {
+          path: '/result/failure',
+          name: '失败',
+          icon: 'none',
+          component: NotFound
+        }
+      ]
     },
     {
-      path: '/chart',
-      name: 'chart',
-      component: MiniArea
+      path: '/exception',
+      name: '异常页',
+      icon: 'warning',
+      component: Exception,
+      children: [
+        {
+          path: '/exception/404',
+          name: '404',
+          icon: 'none',
+          component: NotFound
+        },
+        {
+          path: '/exception/403',
+          name: '403',
+          icon: 'none',
+          component: NotPermit
+        },
+        {
+          path: '/exception/500',
+          name: '500',
+          icon: 'none',
+          component: ServerError
+        }
+      ]
     }
   ]
 })