merge origin zclhl/master 增加moment时间插件，实现动态路由功能

src/components/iframe/main.vue

@@ -19,7 +19,6 @@ export default {
   },
   mounted() {
     this.load();
-    this.resize();
   },
   props: ["routerPath"],
   watch: {
@@ -54,6 +53,7 @@ export default {
     },
     // 加载组件
     load() {
+      this.resize();
       this.show();
       this.$route.query.src = this.$route.query.src
         ? this.$route.query.src.replace("$", "#")
@@ -73,7 +73,7 @@ export default {
     iframeInit() {
       const iframe = this.$refs.iframe;
       if (!iframe) {
-        return
+        return;
       }
       const clientHeight = document.documentElement.clientHeight - 120;
       iframe.style.height = `${clientHeight}px`;

src/main.js

@@ -8,7 +8,9 @@ import './errorLog' // 错误日志
 import router from './router/router'
 import store from './store'
 import AVUE from 'avue-cli/packages/index.js'
-import { loadStyle } from './util/util'
+import {
+  loadStyle
+} from './util/util'
 import * as urls from '@/config/env'
 import {
   iconfontUrl,

src/page/index/sidebar/index.vue

@@ -8,12 +8,11 @@
 </template>
 
 <script>
-import MENU from "@/mock/menu";
 import { setUrlPath } from "@/util/util";
 import { mapGetters } from "vuex";
 import SidebarItem from "./sidebarItem";
 import logo from "./logo";
-import { initMenu } from '@/util/util'
+import { initMenu } from "@/util/util";
 export default {
   name: "sidebar",
   components: { SidebarItem, logo },
@@ -21,12 +20,9 @@ export default {
     return {};
   },
   created() {
-    if (! this.$store.state.user.isInitMenu) {
+    this.$store.dispatch("GetMenu").then(data => {
-      this.$store.dispatch("GetMenu").then((data) => {
+      initMenu(this.$router, data);
-          initMenu(this.$router, data)
+    });
-          this.$store.commit('IS_INIT_MENU', true)
-      });
-    }
   },
   computed: {
     ...mapGetters(["menu", "tag", "isCollapse"]),

src/permission.js

@@ -2,14 +2,20 @@ import router from './router/router'
 import store from './store'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/util/auth'
+import {
-import { setTitle } from '@/util/util'
+  getToken
-import { validatenull } from '@/util/validate'
+} from '@/util/auth'
+import {
+  setTitle
+} from '@/util/util'
+import {
+  validatenull
+} from '@/util/validate'
 
 // NProgress Configuration
 NProgress.configure({
   showSpinner: false
-}) 
+})
 
 function hasPermission(roles, permissionRoles) {
   if (!permissionRoles) return true

src/router/_router.js

@@ -1,103 +1,71 @@
 const _import = require('./_import');
 import Layout from '@/page/index/'
 export default [{
-    path: '/wel',
+  path: '/',
-    component: Layout,
+  name: '主页',
-    redirect: '/wel/index',
+  redirect: '/wel'
-    children: [{
+}, {
-      path: 'index',
+  path: '/wel',
-      name: '首页',
+  component: Layout,
-      component: _import('wel')
+  redirect: '/wel/index',
-    }]
+  children: [{
+    path: 'index',
+    name: '首页',
+    component: _import('wel')
+  }]
+}, {
+  path: '*',
+  redirect: '/404',
+  hidden: true
+}, {
+  path: '/login',
+  name: '登录页',
+  component: _import('login/index')
+}, {
+  path: '/lock',
+  name: '锁屏页',
+  component: _import('lock/index')
+}, {
+  path: '/crud',
+  component: Layout,
+  redirect: '/crud/index',
+  children: [{
+    path: 'index',
+    name: 'crud实例',
+    component: _import('crud/index', 'views')
+  }]
+}, {
+  path: '/info',
+  component: Layout,
+  redirect: '/info/index',
+  children: [{
+    path: 'index',
+    name: '修改信息',
+    component: _import('admin/user/info', 'views')
+  }]
+}, {
+  path: '/404',
+  component: _import('error-page/404', 'components'),
+  name: '404'
+}, {
+  path: '/403',
+  component: _import('error-page/403', 'components'),
+  name: '403'
+}, {
+  path: '/500',
+  component: _import('error-page/500', 'components'),
+  name: '500'
+}, {
+  path: '/myiframe',
+  component: Layout,
+  redirect: '/myiframe',
+  meta: {
+    keepAlive: true
   },
-  {
+  children: [{
-    path: '/crud',
+    path: ':routerPath',
-    component: Layout,
+    name: 'iframe',
-    redirect: '/crud/index',
+    component: _import('iframe/main', 'components'),
-    children: [{
+    props: true
-      path: 'index',
+  }]
-      name: 'crud实例',
+}]
-      component: _import('crud/index', 'views')
-    }]
-  },
-  {
-    path: '/',
-    name: '主页',
-    redirect: '/wel'
-  }, {
-    path: '/info',
-    component: Layout,
-    redirect: '/info/index',
-    children: [{
-      path: 'index',
-      name: '修改信息',
-      component: _import('admin/user/info', 'views')
-    }]
-  }, {
-    menuId: 1,
-    path: '/admin',
-    component: Layout,
-    name: '系统管理',
-    hidden: false,
-    redirect: '/admin/user',
-    meta: {
-      title: '系统管理',
-    },
-    children: [{
-        menuId: 2,
-        path: 'user',
-        component: _import('admin/user/index', 'views'),
-        name: '用户管理',
-        meta: {
-          title: '用户管理'
-        }
-      },
-      {
-        menuId: 3,
-        path: 'menu',
-        component: _import('admin/menu/index', 'views'),
-        name: '菜单管理',
-        meta: {
-          title: '菜单管理'
-        }
-      },
-      {
-        menuId: 4,
-        path: 'role',
-        component: _import('admin/role/index', 'views'),
-        name: '角色管理',
-        meta: {
-          title: '角色管理'
-        }
-      },
-      {
-        menuId: 5,
-        path: 'dept',
-        component: _import('admin/dept/index', 'views'),
-        name: '部门管理',
-        meta: {
-          title: '部门管理',
-          keepAlive: true
-        }
-      },
-      {
-        menuId: 6,
-        path: 'dict',
-        component: _import('admin/dict/index', 'views'),
-        name: '字典管理',
-        meta: {
-          title: '字典管理'
-        }
-      },
-      {
-        menuId: 7,
-        path: 'log',
-        component: _import('admin/log/index', 'views'),
-        name: '日志管理',
-        meta: {
-          title: '日志管理'
-        }
-      }
-    ]
-  }
-]

src/router/router.js

@@ -1,9 +1,14 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import { routerMode } from '@/config/env'
+import {
+  routerMode
+} from '@/config/env'
 import store from '@/store'
-import { formatRoutes } from '@/util/util'
+import {
+  formatRoutes
+} from '@/util/util'
 import Layout from '@/page/index/'
+import baseRouter from './_router'
 const _import = require('./_import')
 
 Vue.use(VueRouter)
@@ -24,76 +29,5 @@ export default new VueRouter({
       }
     }
   },
-  routes: [
+  routes: [].concat(...formatRoutes(store.state.user.menu), baseRouter)
-    {
-      path: '/',
-      name: '主页',
-      redirect: '/wel'
-    }, {
-      path: '/wel',
-      component: Layout,
-      redirect: '/wel/index',
-      children: [{
-        path: 'index',
-        name: '首页',
-        component: _import('wel')
-      }]
-    }, {
-      path: '*',
-      redirect: '/404',
-      hidden: true
-    }, {
-      path: '/login',
-      name: '登录页',
-      component: _import('login/index')
-    }, {
-      path: '/lock',
-      name: '锁屏页',
-      component: _import('lock/index')
-    }, {
-      path: '/crud',
-      component: Layout,
-      redirect: '/crud/index',
-      children: [{
-        path: 'index',
-        name: 'crud实例',
-        component: _import('crud/index', 'views')
-      }]
-    }, {
-      path: '/info',
-      component: Layout,
-      redirect: '/info/index',
-      children: [{
-        path: 'index',
-        name: '修改信息',
-        component: _import('admin/user/info', 'views')
-      }]
-    }, {
-      path: '/404',
-      component: _import('error-page/404', 'components'),
-      name: '404'
-    }, {
-      path: '/403',
-      component: _import('error-page/403', 'components'),
-      name: '403'
-    }, {
-      path: '/500',
-      component: _import('error-page/500', 'components'),
-      name: '500'
-    }, {
-      path: '/myiframe',
-      component: Layout,
-      redirect: '/myiframe',
-      meta: {
-        keepAlive: true
-      },
-      children: [{
-        path: ':routerPath',
-        name: 'iframe',
-        component: _import('iframe/main', 'components'),
-        props: true
-      }]
-    }
-  // 防止F5刷新页面，app重新加载，动态新增路由消失
-  ].concat(...formatRoutes(store.state.user.menu))
 })

src/store/modules/user.js

@@ -1,17 +1,47 @@
-import { getToken, setToken, removeToken } from '@/util/auth'
+import {
-import { setStore, getStore } from '@/util/store'
+  getToken,
-import { validatenull } from '@/util/validate'
+  setToken,
-import { loginByUsername, mobileLogin, getUserInfo, logout } from '@/api/login'
+  removeToken
-import { GetMenu } from '@/api/menu'
+} from '@/util/auth'
+import {
+  setStore,
+  getStore
+} from '@/util/store'
+import {
+  validatenull
+} from '@/util/validate'
+import {
+  loginByUsername,
+  mobileLogin,
+  getUserInfo,
+  logout
+} from '@/api/login'
+import {
+  GetMenu
+} from '@/api/menu'
 const user = {
   state: {
-    userInfo: getStore({ name: 'userInfo' }) || {},
+    userInfo: getStore({
-    permissions: getStore({ name: 'permissions' }) || {},
+      name: 'userInfo'
-    roles: getStore({ name: 'roles' }) || [],
+    }) || {},
-    menu: getStore({ name: 'menu' }) || [],
+    permissions: getStore({
-    isInitMenu: getStore({ name: 'isInitMenu' }) || false,
+      name: 'permissions'
-    access_token: getStore({ name: 'access_token' }) || '',
+    }) || {},
-    refresh_token: getStore({ name: 'refresh_token' }) || ''
+    roles: getStore({
+      name: 'roles'
+    }) || [],
+    menu: getStore({
+      name: 'menu'
+    }) || [],
+    isInitMenu: getStore({
+      name: 'isInitMenu'
+    }) || false,
+    access_token: getStore({
+      name: 'access_token'
+    }) || '',
+    refresh_token: getStore({
+      name: 'refresh_token'
+    }) || ''
   },
   actions: {
     // 根据用户名登录
@@ -133,6 +163,11 @@ const user = {
       return new Promise(resolve => {
         GetMenu().then((res) => {
           const data = res.data
+          data.forEach(ele => {
+            ele.children.forEach(child => {
+              if (!validatenull(child.component)) child.path = `${ele.path}/${child.path}`
+            });
+          });
           commit('SET_MENU', data)
           resolve(data)
         })
@@ -149,26 +184,12 @@ const user = {
       })
     },
     SET_MENU: (state, menu) => {
-      state.menu = menu || []
+      state.menu = menu
       setStore({
         name: 'menu',
         content: state.menu,
         type: 'session'
       })
-      state.isInitMenu = false
-      setStore({
-        name: 'isInitMenu',
-        content: state.isInitMenu,
-        type: 'session'
-      })
-    },
-    IS_INIT_MENU: (state, isInitMenu) => {
-      state.isInitMenu = isInitMenu
-      setStore({
-        name: 'isInitMenu',
-        content: state.isInitMenu,
-        type: 'session'
-      })
     },
     SET_USER_INFO: (state, userInfo) => {
       state.userInfo = userInfo

src/util/util.js

@@ -1,5 +1,9 @@
-import { validatenull } from './validate'
+import {
-import { baseUrl } from '@/config/env'
+  validatenull
+} from './validate'
+import {
+  baseUrl
+} from '@/config/env'
 
 export const initMenu = (router, menu) => {
   if (menu.length === 0) {
@@ -16,35 +20,29 @@ export const formatRoutes = (aMenu) => {
       component,
       name,
       icon,
-      hidden,
-      redirect,
-      meta,
       children
     } = oMenu
-    const oRouter = {
+    if (!validatenull(component)) {
-      path: path,
+      let filePath;
-      component(resolve) {
+      const oRouter = {
-        let componentPath = ''
+        path: path,
-        if (component === 'Layout') {
+        component(resolve) {
-          require(['../page/index'], resolve)
+          let componentPath = ''
-          return
+          if (component === 'Layout') {
-        } else if (component.indexOf('/') !== 0) {
+            require(['../page/index'], resolve)
-          componentPath = '/' + component
+            return
-        } else {
+          } else {
-          componentPath = component
+            componentPath = component
-        }
+          }
-        require(['../views' + componentPath + '.vue'], resolve)
+          require([`../${componentPath}.vue`], resolve)
-      },
+        },
-      name: name,
+        name: name,
-      icon: icon,
+        icon: icon,
-      hidden: hidden,
+        children: validatenull(children) ? [] : formatRoutes(children)
-      meta: meta,
+      }
-      children: (children && children instanceof Array) ? formatRoutes(children) : []
+      aRouter.push(oRouter)
     }
-    if (redirect) {
+
-      oRouter.redirect = redirect
-    }
-    aRouter.push(oRouter)
   })
   return aRouter
 }

src/views/admin/user/index.vue

@@ -198,7 +198,8 @@ export default {
             message: "请选择角色",
             trigger: "blur"
           }
-        ],phone: [
+        ],
+        phone: [
           {
             required: true,
             message: "手机号",
@@ -298,8 +299,8 @@ export default {
         this.dialogFormVisible = true;
         this.dialogStatus = "update";
         this.role = [];
-        for (var i=0;i < row.roleList.length;i++) {
+        for (var i = 0; i < row.roleList.length; i++) {
-          this.role[i] = row.roleList[i].roleId
+          this.role[i] = row.roleList[i].roleId;
         }
         deptRoleList(response.data.deptId).then(response => {
           this.rolesOptions = response.data;