04-路由基本配置.md · 蒋鹏/hrsaas-100期笔记

# 路由基本配置

## 了解路由设计思想

**`目标`** 了解这种大型中台项目的路由设计思想

首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。

**简单项目**

![image-20200827153753307](assets/image-20200827153753307.png)

```
routes: [
	{ path: ..., component: ... },
	{ path: ..., component: ... },
	{ 
	  path: ..., 
	  component: ..., 
	  children: [ 
          {}, 
          {}, 
          {}, 
          {} 
	  ] 
	},
]
```

**当前项目结构**: 将路由进行了模块拆分, 同模块的路由规则将来会放到一起

![image-20200827155342126](assets/image-20200827155342126.png)

> 为什么要拆成若干个路由模块呢？

因为复杂中台项目的页面众多，不可能把所有的业务都`集中在一个文件上`进行管理和维护， (**可维护性角度**)

**并且还有最重要的，前端的页面中主要分为两部分** (我们的项目很可能带权限设计的!)

1. 一部分是 <所有人> 都可以访问的，(`静态路由` - 一直都有的路由)  比如:  登录页,   首页,   404

不会随着账号的变化, 角色的变化, 而变化的一些路由, 无论什么账号或什么角色

其实: 以前配置的所有路由,  都是静态路由,  直接在routes中写死的

2. 一部分是只有 <有权限> 的人才可以访问的 (`动态路由` - 动态新增或移除的路由)  比如: 薪资管理, 人员管理

注意: 路由不是说一定要写死,  写死的就是静态路由,  其实生效的路由, 是可以动态新增 和 移除的

**拆分   多个模块  便于   更好的权限的控制  和  维护**

![image-20200716150421791](assets/image-20200716150421791.png)

**`注意`**这里的动态路由并不是   **路由传参**  的动态路由

**小结:**

拆分成不同的路由模块,  好处:

1. 便于维护, 同模块的路由都放到一起了  
2. 方便进行统一权限控制

概念:

1. 静态路由: 没有进行权限控制的路由, 只要登录过了, 直接都开放的路由 (登录页, 404, 个人中心, ...)
2. 动态路由: 进行了权限控制的路由, 只有有权限的人, 才能访问到的路由 (员工管理, 财务报表)

## 路由页面整理

**`目标`** 删除基础模板中附带的多余页面

> 基础模板帮我们提前内置了一些页面，本章节我们进行一下整理

**删除多余的路由表**   **`src/router/index.js`**

```js
// 静态路由表 =>  静态路由(不需要权限即可访问的)
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
  { path: '*', redirect: '/404', hidden: true }
]
```

> 上面代码，我们只对登录页/404/主页进行了保留

并且我们发现，删除了其他页面之后，左侧导航菜单的数据也只剩下了首页

![image-20200716153900077](assets/image-20200716153900077.png)

**这是因为左侧导航菜单的数据来源于路由信息, 将来菜单是动态根据开放的路由表的信息渲染的, 目前先不纠结**

**删除多余的路由组件**

![image-20200716154315430](assets/image-20200716154315430.png)

> 只保留以上三个路由组件的内容，后续慢慢增加

同样的在api目录下，存在多余的api-table.js 一并删除

**提交代码**

**`本节任务`**：完成业务路由 和 页面的整理

## 业务模块 - 页面快速搭建

### 新建模块页面文件夹

**`目标`**： 快速搭建 - 人资项目的常规业务模块 - 主页面

>截止到现在，我们已经完成了一个中台系统的基本轮廓

接下来，我们可以快速`搭建模块的主页面` (新建模块文件夹, 新建index.vue) 一个模块不是只有一个页面, 我们先只建主页面

```bash
├──views
  ├── approvals           # 审批
  ├── attendances         # 考勤
  ├── dashboard           # 首页 -- 已有
  ├── departments         # 组织架构
  ├── employees           # 员工
  ├── login               # 登录 -- 已有
  ├── permission          # 权限管理
  ├── salarys             # 工资
  ├── setting             # 公司设置
  ├── social              # 社保
  ├── 404                 # 404 -- 已有
```

根据上图中的结构，在views目录下，建立对应的目录，给每个模块新建一个**`index.vue`**，作为每个模块的主页面

**快速新建文件夹**:  利用 git bash(linux环境) 命令

```bash
mkdir approvals attendances departments employees permission salarys setting social   
```

**快速新建index.vue:** 利用 git bash 命令

```
touch approvals/index.vue attendances/index.vue departments/index.vue employees/index.vue permission/index.vue salarys/index.vue setting/index.vue social/index.vue  
```

每个模块的内容，可以先按照标准的模板建立，如

```vue
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        首页
      </h2>
    </div>
  </div>
</template>

}
</script>

<style>

</style>

```

### 配置模块路由规则测试

根据以上的标准建立好对应页面之后，接下来`建立模块的路由规则`,

我们`先不管静态,  动态`, 先简单配一个路由看看

---

按照我们之前的习惯, 是把路由配置到布局路由 `/` 的 `children `下, 但是这样就是将`所有模块的路由都放到一起`了

而我们一个模块还会有`多个路由`,   比如: 员工模块首页, 员工模块详情页, 员工模块编辑页等, 且将来要控制路由的开放与否

所以我们这边会拆分出来, 每个模块一个路由规则, 以组织架构 departments 为例~

```jsx
// 首页模块
{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  children: [
    {
      path: 'dashboard',
      name: 'dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }
  ]
},
// 组织架构模块
{
  path: '/departments',
  component: Layout,
  children: [
    {
      path: '',
      name: 'departments',
      component: () => import('@/views/departments'),
      meta: { title: '组织架构', icon: 'dashboard' }
    }
  ]
},
```

效果图:

![image-20210121014942449](assets/image-20210121014942449.png)

很奇怪, 路由配好了, 导航自动就出来了? 我们下一节研究一下~

## 左侧菜单定制设置

**`目标`**  解析左侧菜单的显示逻辑，  设置左侧导航菜单的图标内容

### 源码解读

上小节中，我们多配了一个路由规则，菜单就显示一个导航内容了，这是为什么 ？

如果每多配一个规则, 就多显示一个导航, 那么 404 和 login 为什么不显示导航 ?

**阅读左侧菜单代码**: **`src/layout/components/Sidebar/SidebarItem.vue`**

1. 只要多配了一个规则, 就多出来一个菜单, 是因为菜单的项, 是遍历路由规则动态渲染出来的

![image-20210121014122031](assets/image-20210121014122031.png)

2. 路由规则上, 可以配置一个 hidden 属性, 配置 true,  就是将来不渲染菜单

![image-20210121015536288](assets/image-20210121015536288.png)

对应源码:

![image-20210121020240587](assets/image-20210121020240587.png)

3. 这里菜单的渲染, 处理了`一级导航菜单` 和 `二级导航菜单`,  二级导航我们这边虽然不需要,   但也不用删除 (不影响功能)

![image-20210121022453809](assets/image-20210121022453809.png)

即如图的逻辑

![image-20200828103109646](assets/image-20200828103109646.png)

`注意`: 由于，该项目不需要二级菜单的显示，所以对代码进行一下处理，只保留一级菜单路由

`重点`: 如何拿到当前项目中, 现在的所有路由表信息,  `this.$router.options.routes`

### 配置菜单文字和icon图标

`目标`: 配置菜单文字 和 菜单图标

阅读源码 `SidebarItem.vue`:

![image-20210121024155949](assets/image-20210121024155949.png)

1. 左侧菜单的文字 => 读取的是meta属性的title, 直接改即可

2. 左侧菜单的图标 => 读取的是meta属性的icon，这个icon需要我们提前放置在**`src/icons/svg`**目录下

修改步骤:

1. **拷贝svg图标到项目中**:  该资源已经在资料svg目录中提供，请将该目录下的所有svg放到**`src/icons/svg`**目录下

2. **修改icon名字**: 具体的icon名称也可参考[线上地址](https://panjiachen.github.io/vue-element-admin/#/icon/index)

svg组件的使用, 参考:

1. [懒人神器：svg-sprite-loader实现自己的Icon组件](https://segmentfault.com/a/1190000015367490)

2. [未来必热：SVG Sprites技术介绍](https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/)

```jsx
{
  path: '/departments',
  component: Layout,
  children: [
    {
      path: '',
      name: 'departments',
      component: () => import('@/views/departments'),
      meta: { title: '组织架构', icon: 'tree' }
    }
  ]
},
```

**模块对应icon参照表**

```txt
├── dashboard           # dashboard
├── departments         # tree
├── employees           # people
├── setting             # setting
├── salarys             # money
├── social              # table
├── attendances         # skill
├── approvals           # tree-table
├── permission          # lock
```

效果图:

![image-20210121025505304](assets/image-20210121025505304.png)

**`本节任务：`** 理解左侧菜单的生成逻辑，并设置左侧菜单的图标

## 新建路由模块

`目标`:  新建路由模块

按刚才的方式, 成功新增了一个路由模块, 但是如果所有的路由全都写在一个文件中肯定不合适, 所以要拆模块

业务路由模块目录结构

```bash
├── router               # 路由目录
 ├── index.js            # 路由主文件
 ├── modules             # 模块目录
  ├── approvals.js        # 审批  			图标: tree-table
  ├── attendances.js      # 考勤  			 图标: skill
  ├── departments.js      # 组织架构 	        图标: tree
  ├── employees.js        # 员工 			    图标: people
  ├── permission.js       # 权限管理		    图标: lock
  ├── salarys.js         # 工资				图标: money
  ├── setting.js         # 公司设置		        图标: setting
  ├── social.js          # 社保			    图标: table 
```

快速创建命令

```bash
$ touch approvals.js attendances.js departments.js employees.js permission.js setting.js salarys.js salarys.js social.js 
```

改造文件内容:

```jsx
// 组织架构模块
import Layout from '@/layout'

export default {
  path: '/departments',
  component: Layout,
  children: [
    {
      path: '',
      name: 'departments',
      component: () => import('@/views/departments'),
      meta: { title: '组织架构', icon: 'tree' }
    }
  ]
}
```

**`本节任务`**：完成其他模块的页面和路由的快速搭建

## 静态路由和动态路由临时合并，形成完整左侧菜单

**`目标`**： 将静态路由和动态路由的路由表进行临时合并

> 什么叫临时合并？

在第一个小节中，我们讲过了，动态路由是需要权限进行访问的，但是权限的动态路由访问是比较复杂的，

我们后面再进行讲解，所以为了更好地看到效果，我们可以先将 静态路由和动态路由进行合并, 也就是默认开放所有路由权限

**路由主文件**  **`src/router/index.js`**

```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] // 临时合并动态路由和静态路由
})
```

> 通过上面的操作，我们将静态路由和动态路由进行了合并

效果图:

![image-20210121032414357](assets/image-20210121032414357.png)

**提交代码**

**`本节任务`**： 将静态路由和动态路由临时合并，形成左侧菜单

## 处理高亮激活 (可选)

左侧菜单被选中时, 会加上一个 is-active 类, 可以在 sidebar.scss 覆盖下样式

![image-20210121034024443](assets/image-20210121034024443.png)

代码如下:

```scss
li.is-active {
  background-color: #fff!important;
  .svg-icon {
    color: #43a7fe;
  }
  span {
    color: #43a7fe;
  }
}
```

效果图:

![image-20210121034358042](assets/image-20210121034358042.png)

蒋鹏/hrsaas-100期笔记

简介

发行版

贡献者

近期动态

蒋鹏/hrsaas-100期笔记 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

蒋鹏/hrsaas-100期笔记