# 路由配置

# 回顾

获取用户基本信息
获取用户的头像信息
关于对象的延展运算符的用法
熟悉Vue插件的用法
- 如何定义插件
- 如何配置插件
自定义指令的用法
通过自定义指令触发图片加载失败的情况
- 如果src的值是null，那么不会触发onerror事件，但是如果是空字符串就会触发
实现退出功能
处理token的失效问题

# 路由配置介绍

熟悉静态路由和动态路由的概念

静态路由：提前写死的路由配置（只有打开页面就可以访问的路由）

动态路由：只有该用户拥有这个路由模块权限的时候才可以访问路由（由用户的权限控制）

动态路由的权限是由用户相关的数据决定的

# 整理路由配置

目标 删除基础模板中附带的多余页面并且删除多余的路由配置

删除多余的路由配置 src/router/index.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/主页】进行了保留，并且我们发现，删除了其他页面之后，左侧导航菜单的数据也只剩下了首页

# 搭建业务模块页面

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

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

mkdir approvals attendances departments employees permission salarys setting social

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

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

<script>
export default {

}
</script>

<style>

</style>

总结，如何快速的创建多个文件夹？mkdir 文件夹名称（多个名称空格隔开）

# 配置模块路由规则

目标：配置路由规则

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

// 首页模块
{
  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' }
    }
  ]
},

总结

左侧菜单一级路由组件都是Layout

右侧区域显示的组件实际上是二级路由

注意：如果children配置的子路由的path如果是空字符串，那么默认就显示该二级路由

为什么要这样配置？为了进一步拆分路由模块（项目规模变大之后，拆分更容易维护）

# 左侧菜单逻辑分析

目标：熟悉左侧菜单的渲染逻辑

src/layout/components/Sidebar/SidebarItem.vue

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

<el-menu
  :default-active="activeMenu"
  :collapse="isCollapse"
  :background-color="variables.menuBg"
  :text-color="variables.menuText"
  :unique-opened="false"
  :active-text-color="variables.menuActiveText"
  :collapse-transition="false"
  mode="vertical"
>
  <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>

computed: {
  routes() {
    // this.$router.options.routes 代表的是配置的路由映射
    // 这个API是由vue-router提供
    return this.$router.options.routes
  },
}

路由规则上, 可以配置一个 hidden 属性, 配置 true, 就是将来不渲染菜单（除了hidden之外也与children属性有关）

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

这里菜单的渲染, 处理了一级导航菜单 和 二级导航菜单, 二级导航我们这边不需要, 可以注释掉

<template>
  <div v-if="!item.hidden">

总结：通过vue-router的api获取所有的路由映射数组，动态遍历形成左侧菜单，通过hidden属性控制路由映射是否显示在左侧菜单列表中。

# 关于左侧菜单的结构

菜单显示的条件：hidden和children共同决定
组件的嵌套关系
- router-link标签是由动态组件component渲染出来
- 动态组件单独再分析

<el-menu>
  <router-link :to='to'>
    <el-menu-item>
      <!-- item组件用于显示菜单的图标和标题文本 -->
      <item></item>
    </el-menu-item>
  </router-link>
</el-menu>

# 动态组件基本用法

目标：熟悉动态组件的基本使用规则

<!-- 如果is属性的值是哪个组件的名称，就渲染哪个组件到这个位置 -->
<component v-bind:is="currentTabComponent"></component>

Vue.component('my-tom', {
  template: '<div>TOM</div>'
})

Vue.component('my-jerry', {
  template: '<div>JERRY</div>'
})

data () {
  return {
    currentTabComponent: 'my-jerry'
  }
}

总结：

is的值是要渲染的组件的名称，最终渲染的结果仅仅是组件本身的模板，不会渲染出component标签

梳理：

初步了解静态路由和动态路由

精简默认的路由配置

初始化业务模块的文件

配置业务模块的路由（一级路由配置为Layout组件，二级路由配置右侧内容区）

左侧菜单的组件结构

<el-menu>
  <app-link>
    <el-menu-item>
      <Item></Item>
    </el-menu-item>
  </app-link>
</el-menu>

动态组件的用法；动态组件中使用插槽的用法
如果v-bind的值直接赋值一个对象，那么相当于把对象的每一个属性对象进行分别绑定

# 配置菜单文字和icon图标

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

拷贝svg图标到项目中: 该资源已经在资料svg目录中提供，请将该目录下的所有svg放到**src/icons/svg**目录下
修改icon名字: 具体的icon名称可参考线上地址 (opens new window)

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

模块对应icon参照表

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

# 拆分路由模块

目标: 新建拆分路由模块

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

├── 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

快速创建文件命令

touch approvals.js attendances.js departments.js employees.js permission.js setting.js salarys.js social.js

重构文件内容

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

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

总结：把每一个业务模块的路由单独进行拆分然后再导入并进行配置

基于touch命令批量创建文件

# 动态路由和静态路由合并

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

什么叫临时合并？

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

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

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

// 引入多个模块的规则
import approvalsRouter from '@/router/modules/approvals'
import departmentsRouter from '@/router/modules/departments'
import employeesRouter from '@/router/modules/employees'
import permissionRouter from '@/router/modules/permission'
import attendancesRouter from '@/router/modules/attendances'
import salarysRouter from '@/router/modules/salarys'
import settingRouter from '@/router/modules/setting'
import socialRouter from '@/router/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] // 临时合并动态路由和静态路由
})

总结：静态路由配置和动态路由配置分开处理

数组的合并写法 cosnt arr = [...arr1, ...arr2]

# 处理高亮激活

目标：控制点击路由链接高亮

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

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

总结：点中左侧菜单后，自动添加一个is-active类名，我们需要提供对应的样式即可。

注意：点中菜单高亮的行为是 Element-UI的菜单组件的行为（is-active类名是Element-UI自动添加的）

基于路由的高亮采用：router-link-exact-active router-link-active

← 主页模块组织架构模块 →