业务模块路由

src/router/index.js

@@ -1,5 +1,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import approvalsRouter from './modules/approvals'
+import departmentsRouter from './modules/departments'
+import employeesRouter from './modules/employees'
+import permissionRouter from './modules/permission'
+import attendancesRouter from './modules/attendances'
+import salarysRouter from './modules/salarys'
+import settingRouter from './modules/setting'
+import socialRouter from './modules/social'
 
 Vue.use(Router)
 
@@ -22,7 +30,7 @@ export const constantRoutes = [
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard' }
+      meta: { title: '首页', icon: 'dashboard' }
     }]
   },
 
@@ -36,10 +44,22 @@ export const constantRoutes = [
   { path: '*', redirect: '/404', hidden: true }
 ]
 
+// 动态路由
+export const asyncRoutes = [
+  departmentsRouter,
+  employeesRouter,
+  settingRouter,
+  permissionRouter,
+  socialRouter,
+  attendancesRouter,
+  salarysRouter,
+  approvalsRouter
+]
+
 const createRouter = () => new Router({
   // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
+  scrollBehavior: () => ({ y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
+  routes: [...constantRoutes, ...asyncRoutes]
 })
 
 const router = createRouter()

src/router/modules/approvals.js

@@ -0,0 +1,21 @@
+// 导出属于审批的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/approvals', // 路径
+  name: 'approvals', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/approvals'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '审批'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/attendances.js

@@ -0,0 +1,21 @@
+// 导出属于考勤的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/attendances', // 路径
+  name: 'attendances', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/attendances'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '考勤'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/departments.js

@@ -0,0 +1,21 @@
+// 导出属于组织架构的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/departments', // 路径
+  name: 'departments', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/departments'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '组织架构'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/employees.js

@@ -0,0 +1,21 @@
+// 导出属于员工的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/employees', // 路径
+  name: 'employees', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/employees'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '员工管理'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/permission.js

@@ -0,0 +1,21 @@
+// 导出属于权限管理的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/permission', // 路径
+  name: 'permission', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/permission'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '权限管理'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/salarys.js

@@ -0,0 +1,21 @@
+// 导出属于工资的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/salarys', // 路径
+  name: 'salarys', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/salarys'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '工资'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/setting.js

@@ -0,0 +1,21 @@
+// 导出属于公司设置的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/setting', // 路径
+  name: 'setting', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/setting'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '公司设置'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/router/modules/social.js

@@ -0,0 +1,21 @@
+// 导出属于社保的路由规则
+import Layout from '@/layout'
+//  {  path: '', component: '' }
+// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面
+export default {
+  path: '/social', // 路径
+  name: 'social', // 给路由规则加一个name
+  component: Layout, // 组件
+  // 配置二级路的路由表
+  children: [{
+    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
+    component: () => import('@/views/social'),
+    // 路由元信息: 其实就是存储数据的对象 我们可以在这里放置一些信息
+    meta: {
+      title: '社保'
+      // meta属性的里面的属性随意定义 这里用title，是因为左侧导航会读取路由里的meta里面的title作为显示菜单名称
+    }
+  }]
+}
+
+// 当你的访问地址是 /employees的时候,layout组件会显示,二级路由的默认组件也会显示

src/views/approvals/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        审批
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/attendances/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        考勤
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/departments/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        组织架构
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/employees/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        员工
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/permission/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        权限管理
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/salarys/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        工资
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/setting/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        公司设置
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/social/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dashboard-container">
+    <div class="app-container">
+      <h2>
+        社保
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>