init edit router

config/app/basic.js

@@ -1 +0,0 @@
-export const cookieExpires = 1;

config/url.js

@@ -1,4 +1,4 @@
-import env from '../../build/env';
+import env from '../build/env';
 
 export default env === 'development' ?
   'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/' :

src/App.vue

@@ -5,8 +5,17 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 export default {
-  name: 'App'
+  name: 'App',
+  methods: {
+    ...mapActions('routers', [
+      'getRouter'
+    ])
+  },
+  mounted () {
+    this.getRouter()
+  }
 }
 </script>
 

src/api/routers.js

@@ -0,0 +1,8 @@
+import axios from '@/libs/api.request'
+
+export const getRouterReq = () => {
+  return axios.request({
+    url: 'get_router',
+    method: 'get'
+  })
+}

src/components/login-form/login-form.vue

@@ -1,18 +1,18 @@
 <template>
   <Form ref="loginForm" :model="form" :rules="rules">
     <FormItem prop="userName">
-      <Input v-model="form.userName" placeholder="请输入用户名">
+      <ivu-input v-model="form.userName" placeholder="请输入用户名">
         <span slot="prepend">
           <Icon :size="16" type="person"></Icon>
         </span>
-      </Input>
+      </ivu-input>
     </FormItem>
     <FormItem prop="password">
-      <Input type="password" v-model="form.password" placeholder="请输入密码">
+      <ivu-input type="password" v-model="form.password" placeholder="请输入密码">
         <span slot="prepend">
           <Icon :size="14" type="locked"></Icon>
         </span>
-      </Input>
+      </ivu-input>
     </FormItem>
     <FormItem>
       <Button @click="handleSubmit" type="primary" long>登录</Button>

src/components/main/parent-view/index.js

@@ -0,0 +1,2 @@
+import parentView from './parent-view.vue'
+export default parentView

src/components/main/parent-view/parent-view.vue

@@ -0,0 +1,8 @@
+<template>
+  <router-view/>
+</template>
+<script>
+export default {
+  name: 'parentView'
+}
+</script>

src/config/basic.js

@@ -0,0 +1 @@
+export const cookieExpires = 1

src/libs/axios.js

@@ -1,5 +1,5 @@
 import Axios from 'axios'
-import baseURL from '_conf/app/url'
+import baseURL from '_conf/url'
 import { Message } from 'iview'
 import Cookies from 'js-cookie'
 class httpRequest {

src/libs/util.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 // cookie保存的天数
-import { cookieExpires } from '_conf/app/basic'
+import { cookieExpires } from '@/config/basic'
 
 const TOKEN_KEY = 'token'
 
@@ -13,3 +13,7 @@ export const getToken = () => {
   if (token) return token
   else return false
 }
+
+export const handleRouter = routerList => {
+  return routerList
+}

src/router/base-router.js

@@ -1,16 +1,50 @@
 import Main from '@/view/main'
+import parentView from '@/components/main/parent-view'
 
 export default [
-  { path: '/login',
+  {
+    path: '/login',
     name: 'login',
     meta: {
       title: 'Login - 登录'
     },
     component: () => import('@/view/login/login.vue')
   },
-  { path: '/',
-    name: 'home',
+  {
+    path: '/',
+    name: 'index',
     // redirect: '/home',
-    component: Main
+    component: Main,
+    children: [
+      {
+        path: 'home',
+        name: 'home',
+        component: () => import('@/view/single-page/home')
+      },
+      {
+        path: 'multilevel',
+        name: 'multilevel',
+        component: parentView,
+        children: [
+          {
+            path: 'level_1',
+            name: 'level_1',
+            component: () => import('@/view/multilevel/level-1.vue')
+          },
+          {
+            path: 'level_2',
+            name: 'level_2',
+            component: parentView,
+            children: [
+              {
+                path: 'level_2_1',
+                name: 'level_2_1',
+                component: () => import('@/view/multilevel/level-2/level-2-1.vue')
+              }
+            ]
+          }
+        ]
+      }
+    ]
   }
 ]

src/router/index.js

@@ -1,11 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import baseRouter from './base-router'
+import routes from './routers'
 
 Vue.use(Router)
 
 export default new Router({
-  routes: [
-    ...baseRouter
-  ]
+  routes
 })

src/router/routers.js

@@ -1,31 +1,64 @@
 import Main from '@/view/main'
-
-const addChildPage = (name, path = '') => {
-  return {
-    path: name,
-    name: name,
-    component: () => import(`@/view/${path}${name}`)
-  }
-}
+import parentView from '@/components/main/parent-view'
 
 export default [
   {
-    path: '/',
-    name: 'pageNotShowInMenu',
-    component: Main,
-    children: [
-      addChildPage('home'), // 首页
-      addChildPage('ownspace', 'single-page/'), // 个人中心
-      addChildPage('message', 'single-page/'), // 消息中心
-      addChildPage('shopping', 'single-page/') // 购物中心
-    ]
+    path: '/login',
+    name: 'login',
+    meta: {
+      title: 'Login - 登录'
+    },
+    component: () => import('@/view/login/login.vue')
   },
   {
-    path: '/international',
-    name: 'international',
+    path: '/',
+    name: 'index',
+    // redirect: '/home',
     component: Main,
     children: [
-      // addChildPage('index', )
+      {
+        path: 'home',
+        name: 'home',
+        hideInMenu: true,
+        notCache: true,
+        component: () => import('@/view/single-page/home')
+      },
+      {
+        path: '/components',
+        name: 'components',
+        component: parentView,
+        children: [
+          {
+            path: 'count_to',
+            name: 'count_to',
+            component: () => import('@/view/components/count-to/count-to.vue')
+          }
+        ]
+      },
+      {
+        path: 'multilevel',
+        name: 'multilevel',
+        component: parentView,
+        children: [
+          {
+            path: 'level_1',
+            name: 'level_1',
+            component: () => import('@/view/multilevel/level-1.vue')
+          },
+          {
+            path: 'level_2',
+            name: 'level_2',
+            component: parentView,
+            children: [
+              {
+                path: 'level_2_1',
+                name: 'level_2_1',
+                component: () => import('@/view/multilevel/level-2/level-2-1.vue')
+              }
+            ]
+          }
+        ]
+      }
     ]
   }
 ]

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import user from './module/user'
+import routers from './module/routers'
 
 Vue.use(Vuex)
 
@@ -16,6 +17,7 @@ export default new Vuex.Store({
     //
   },
   modules: {
-    user
+    user,
+    routers
   }
 })

src/store/module/routers.js

@@ -0,0 +1,31 @@
+import { getRouterReq } from '@/api/routers'
+import { handleRouter } from '@/libs/util'
+export default {
+  namespaced: true,
+  state: {
+    routerList: []
+  },
+  getters: {
+    menuList: state => handleRouter(state.routerList)
+  },
+  mutations: {
+    setRouter (state, routerList) {
+      state.routerList = routerList
+    }
+  },
+  actions: {
+    getRouter ({ commit, state, rootState }) {
+      const token = rootState.user.token
+      return new Promise((resolve, reject) => {
+        if (token) {
+          getRouterReq().then(res => {
+            commit('setRouter', res.data.router)
+            resolve()
+          }).catch(err => {
+            reject(err)
+          })
+        }
+      })
+    }
+  }
+}

src/view/main/main.vue

@@ -1,8 +1,14 @@
 <template>
-  <div>12313123</div>
+  <div>{{ menuList }}</div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
-  name: 'Main'
+  name: 'Main',
+  computed: {
+    ...mapGetters('routers', [
+      'menuList'
+    ])
+  }
 }
 </script>

src/view/multilevel/level-1.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>level-1</div>
+</template>
+<script>
+export default {
+  name: 'level_1'
+}
+</script>

src/view/multilevel/level-2/level-2-1.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>level-2-1</div>
+</template>
+<script>
+export default {
+  name: 'level_2_1'
+}
+</script>

src/view/multilevel/level-2/level-2-2.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>level-2-2</div>
+</template>
+<script>
+export default {
+  name: 'level_2_2'
+}
+</script>

src/view/multilevel/level-2/level-3/level-3-1.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>level-3-1</div>
+</template>
+<script>
+export default {
+  name: 'level_3_1'
+}
+</script>