Vue项目实战之人力资源平台系统（四）路由模块

前言

一、路由页面整理

1.1 项目路由设计图

1.2 路由设计思想

因为项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，就是权限控制。
很大一部分前端页面需要有权限的用户才可以访问，所以拆分多个模块便于更好的控制
1
2

1.3 删除基础模板自带的路由

在src/router/index.js中删除多余的静态路由表，只保留登录页，404，主页：

/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },


  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },


  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },


  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

我们发现，删除了其他路由之后，左侧导航菜单的数据也只剩下了首页
这是因为左侧导航菜单的数据来源于路由信息
接着删除src/router/modules/下的其他路由配置文件，只保留登录页，404，主页
同时删除src/api目录下的api-table.js文件

二、业务模块页面的快速搭建

我们可以给项目需要的模块快速搭建相应的页面和路由
在views目录下，建立以下目录，同时给每个模块新建一个index.vue，作为每个模块的主页：

├── departments         # 组织架构
├── employees           # 员工
├── setting             # 公司设置
├── salarys             # 工资
├── social              # 社保
├── attendances         # 考勤
├── approvals           # 审批
├── permission          # 权限管理
1
2
3
4
5
6
7
8

然后给每个模块的index.vue添加统一的模板内容，如下所示：

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        员工
      </h2>
    </div>
  </div>
</template>


<script>
export default {


}
</script>


<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

然后在src/router/modules目录下建立每个模块的路由规则：

  ├── departments.js     # 组织架构
  ├── employees.js       # 员工
  ├── setting.js         # 公司设置
  ├── salarys.js         # 工资
  ├── social.js          # 社保
  ├── attendances.js     # 考勤
  ├── approvals.js       # 审批
  ├── permission.js      # 权限管理
1
2
3
4
5
6
7
8

然后设置每个模块的路由规则：

// 导出属于员工的路由规则
import Layout from '@/layout'

// 每个子模块其实都是外层是layout  组件位于layout的二级路由里面
export default {
  path: '/employees', // 路径
  name: 'employees', // 给路由规则加一个name
  component: Layout, // 组件
  // 配置二级路的路由表
  children: [{
    path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
    component: () => import('@/views/employees'),
    // 路由元信息  其实就是存储数据的对象 我们可以在这里放置一些信息
    meta: {
      title: '员工管理' // meta属性的里面的属性 随意定义 但是这里为什么要用title呢， 因为左侧导航会读取我们的路由里的meta里面的title作为显示菜单名称
    }
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、静态路由和动态路由临时合并，形成左侧菜单

在路由主文件src/router/index.js中添加如下代码：

// 引入多个模块的规则
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'

// 动态路由
export const asyncRoutes = [
  approvalsRouter,
  departmentsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter
]
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
  routes: [...constantRoutes, ...asyncRoutes] // 临时合并所有的路由
})

当我们合并路由完成以后，打开主页我们就会发现我们新建的路由已经全部展现到左侧的导航菜单中了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

四、设置左侧菜单图标

通过阅读代码我们发现左侧菜单的图标实际上读取的是meta属性的icon，这个icon需要我们提前放置在src/icons/svg目录下
然后直接给src/router/modules目录下的每个模块的路由规则中的meta属性添加一个icon
模块对应的icon如下：

├── dashboard           # dashboard
├── departments         # tree
├── employees           # people
├── setting             # setting
├── salarys             # money
├── social              # table
├── attendances         # skill
├── approvals           # tree-table
├── permission          # lock
1
2
3
4
5
6
7
8
9

总结

今天的内容比较简单，主要是给整个项目配置路由模块，让其能够实现页面跳转和左侧菜单展示。然后今天是中秋节，在这里祝看到这篇文章的小伙伴们中秋节快乐！