hrsass-notes
/
05-路由和页面.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>路由页面整理 | 人资项目</title>
    <meta name="generator" content="VuePress 1.8.2">

    <meta name="description" content="人力资源管理系统项目">

    <link rel="preload" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css" as="style"><link rel="preload" href="/hrsass-notes/assets/js/app.6c8c6ef7.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/2.dbebf407.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/9.c7557c6f.js" as="script"><link rel="prefetch" href="/hrsass-notes/assets/js/10.a57b780c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/11.dc45fce4.js"><link rel="prefetch" href="/hrsass-notes/assets/js/12.45e48562.js"><link rel="prefetch" href="/hrsass-notes/assets/js/13.95efdd8f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/14.7dd970c2.js"><link rel="prefetch" href="/hrsass-notes/assets/js/15.cb4a760f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/16.104f1088.js"><link rel="prefetch" href="/hrsass-notes/assets/js/17.4082264f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/18.ea0e5a1a.js"><link rel="prefetch" href="/hrsass-notes/assets/js/19.44df7a6c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/20.2da2450e.js"><link rel="prefetch" href="/hrsass-notes/assets/js/21.2b218055.js"><link rel="prefetch" href="/hrsass-notes/assets/js/22.ebaa787f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/3.dd9ee1b1.js"><link rel="prefetch" href="/hrsass-notes/assets/js/4.04f228d0.js"><link rel="prefetch" href="/hrsass-notes/assets/js/5.dc6fc8bc.js"><link rel="prefetch" href="/hrsass-notes/assets/js/6.08bd0e1c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/7.aad1ab06.js"><link rel="prefetch" href="/hrsass-notes/assets/js/8.562a2120.js">
    <link rel="stylesheet" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/hrsass-notes/" class="home-link router-link-active"><img src="/hrsass-notes/logo.png" alt="人资项目" class="logo"> <span class="site-name can-hide">人资项目</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
  01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
  02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
  03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
  04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
  05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
  06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
  07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
  08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
  09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
  10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
  11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
  12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
  13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
  Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueRouter
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ElementUI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-i18n
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-print-nb
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
  screenfull
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
  nprogress
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
  xlsx
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
  cos-js-sdk-v5
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
  01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
  02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
  03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
  04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
  05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
  06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
  07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
  08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
  09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
  10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
  11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
  12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
  13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
  Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueRouter
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ElementUI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-i18n
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-print-nb
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
  screenfull
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
  nprogress
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
  xlsx
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
  cos-js-sdk-v5
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>路由页面整理</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/hrsass-notes/05-%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A1%B5%E9%9D%A2.html#路由页面整理" class="sidebar-link">路由页面整理</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/05-%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A1%B5%E9%9D%A2.html#业务模块页面的快速搭建" class="sidebar-link">业务模块页面的快速搭建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/05-%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A1%B5%E9%9D%A2.html#新建模块的页面和路由文件" class="sidebar-link">新建模块的页面和路由文件</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/05-%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A1%B5%E9%9D%A2.html#设置每个模块的路由规则" class="sidebar-link">设置每个模块的路由规则</a></li></ul></li><li><a href="/hrsass-notes/05-%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A1%B5%E9%9D%A2.html#静态路由和动态路由临时合并-形成左侧菜单" class="sidebar-link">静态路由和动态路由临时合并，形成左侧菜单</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/05-%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A1%B5%E9%9D%A2.html#左侧菜单的显示逻辑-设置菜单图标" class="sidebar-link">左侧菜单的显示逻辑，设置菜单图标</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="路由页面整理"><a href="#路由页面整理" class="header-anchor">#</a> 路由页面整理</h2> <p><strong><code>目标</code></strong> 删除基础模板中附带的多余页面</p> <blockquote><p>基础模板帮我们提前内置了一些页面，本章节我们进行一下整理</p></blockquote> <p>首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。</p> <p><strong>简单项目</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200827153753307.95d102db.png" alt="image-20200827153753307"></p> <p><strong>当前项目结构</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200827155342126.29415284.png" alt="image-20200827155342126"></p> <blockquote><p>为什么要拆成若干个路由模块呢？</p></blockquote> <p>因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的， 一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制</p> <p><strong>静态路由和动态路由</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200716150421791.f605602a.png" alt="image-20200716150421791"></p> <p>**<code>注意</code>**这里的动态路由并不是 <strong>路由传参</strong>的动态路由</p> <p>了解完成路由设计之后，我们对当前的路由进行一下整理</p> <p><strong>删除多余的静态路由表</strong> <strong><code>src/router/index.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> constantRoutes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/login/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    hidden<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/404'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/404'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    hidden<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Layout<span class="token punctuation">,</span>
    redirect<span class="token operator">:</span> <span class="token string">'/dashboard'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Dashboard'</span><span class="token punctuation">,</span>
      <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/dashboard/index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Dashboard'</span><span class="token punctuation">,</span> icon<span class="token operator">:</span> <span class="token string">'dashboard'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 404 page must be placed at the end !!!</span>
  <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> redirect<span class="token operator">:</span> <span class="token string">'/404'</span><span class="token punctuation">,</span> hidden<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><blockquote><p>上面代码，我们只对登录页/404/主页进行了保留</p></blockquote> <p>并且我们发现，删除了其他页面之后，左侧导航菜单的数据也只剩下了首页</p> <p><img src="/hrsass-notes/assets/img/image-20200716153900077.5c503957.png" alt="image-20200716153900077"></p> <p><strong>这是因为左侧导航菜单的数据来源于路由信息</strong></p> <p><strong>删除多余的路由组件</strong></p> <p><img src="data:image/png;base64,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" alt="image-20200716154315430"></p> <blockquote><p>只保留以上三个路由组件的内容，后续慢慢增加</p></blockquote> <p>同样的在api目录下，存在多余的api-table.js 一并删除</p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>：完成业务路由页面的整理</p> <h2 id="业务模块页面的快速搭建"><a href="#业务模块页面的快速搭建" class="header-anchor">#</a> 业务模块页面的快速搭建</h2> <p><strong><code>目标</code></strong>： 快速搭建人资项目的常规业务模块</p> <h3 id="新建模块的页面和路由文件"><a href="#新建模块的页面和路由文件" class="header-anchor">#</a> 新建模块的页面和路由文件</h3> <blockquote><p>截止到现在，我们已经完成了一个中台系统的基本轮廓，如图</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200716224038544.10479783.png" alt="image-20200716224038544"></p> <p>接下来，我们可以将人力资源需要做的模块快速搭建相应的页面和路由</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>├── dashboard            <span class="token comment"># 首页</span>
├── login                <span class="token comment"># 登录</span>
├── <span class="token number">404</span>                  <span class="token comment"># 404</span>
├── departments          <span class="token comment"># 组织架构</span>
├── employees            <span class="token comment"># 员工</span>
├── settings             <span class="token comment"># 公司设置</span>
├── salarys              <span class="token comment"># 工资</span>
├── socials              <span class="token comment"># 社保</span>
├── attendances          <span class="token comment"># 考勤</span>
├── approvals            <span class="token comment"># 审批</span>
├── permissions          <span class="token comment"># 权限管理</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>根据上图中的结构，在views目录下，建立对应的目录，给每个模块新建一个**<code>index.vue</code>**，作为每个模块的主页</p> <p><strong>快速新建文件夹</strong></p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>$ <span class="token function">mkdir</span> departments employees settings salarys socials attendances approvals permissions
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>每个模块的内容，可以先按照标准的模板建立，如</p> <p><strong>员工</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dashboard-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>
        员工
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>

<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><blockquote><p>根据以上的标准建立好对应页面之后，接下来建立每个模块的路由规则</p></blockquote> <p>路由模块目录结构</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>├── router               <span class="token comment"># 路由目录</span>
 ├── index.js            <span class="token comment"># 路由主文件</span>
 ├── modules             <span class="token comment"># 模块目录</span>
  ├── departments.js     <span class="token comment"># 组织架构</span>
  ├── employees.js       <span class="token comment"># 员工 </span>
  ├── settings.js         <span class="token comment"># 公司设置</span>
  ├── salarys.js         <span class="token comment"># 工资</span>
  ├── socials.js          <span class="token comment"># 社保</span>
  ├── attendances.js     <span class="token comment"># 考勤</span>
  ├── approvals.js       <span class="token comment"># 审批</span>
  ├── permissions.js      <span class="token comment"># 权限管理</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>快速创建命令</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>$ <span class="token function">touch</span> departments.js employees.js settings.js salarys.js socials.js attendances.js approvals.js permissions.js
// 推荐使用 <span class="token function">git</span> <span class="token function">bash</span> 执行该命令
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="设置每个模块的路由规则"><a href="#设置每个模块的路由规则" class="header-anchor">#</a> 设置每个模块的路由规则</h3> <blockquote><p>每个模块导出的内容表示该模块下的路由规则</p></blockquote> <p>如员工 <strong>employees.js</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 导出属于员工的路由规则</span>
<span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'@/layout'</span>
<span class="token comment">//  {  path: '', component: '' }</span>
<span class="token comment">// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">'/employees'</span><span class="token punctuation">,</span> <span class="token comment">// 路径</span>
  name<span class="token operator">:</span> <span class="token string">'employees'</span><span class="token punctuation">,</span> <span class="token comment">// 给路由规则加一个name</span>
  component<span class="token operator">:</span> Layout<span class="token punctuation">,</span> <span class="token comment">// 组件</span>
  <span class="token comment">// 配置二级路的路由表</span>
  children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/employees'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token comment">// 路由元信息  其实就是存储数据的对象 我们可以在这里放置一些信息</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'员工管理'</span> <span class="token comment">// meta属性的里面的属性 随意定义 但是这里为什么要用title呢， 因为左侧导航会读取我们的路由里的meta里面的title作为显示菜单名称</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// 当你的访问地址 是 /employees的时候 layout组件会显示 此时 你的二级路由的默认组件  也会显示</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><blockquote><p>上述代码中，我们用到了meta属性，该属性为一个对象，里面可放置自定义属性，主要用于读取一些配置和参数，并且值得**<code>注意</code><strong>的是：我们的meta写了二级默认路由上面，而不是一级路由，因为当存在二级路由的时候，访问当前路由信息访问的就是</strong><code>二级默认路由</code>**</p></blockquote> <p>大家针对上述的设计，对上面的模块进行快速的搭建</p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>：完成其他模块的页面和路由的快速搭建</p> <h2 id="静态路由和动态路由临时合并-形成左侧菜单"><a href="#静态路由和动态路由临时合并-形成左侧菜单" class="header-anchor">#</a> 静态路由和动态路由临时合并，形成左侧菜单</h2> <p><strong><code>目标</code></strong>： 将静态路由和动态路由的路由表进行临时合并</p> <blockquote><p>什么叫临时合并？</p></blockquote> <p>在第一个小节中，我们讲过了，动态路由是需要权限进行访问的，但是权限的动态路由访问是很复杂的，我们稍后在进行讲解，所以为了更好地看到效果，我们可以先将 静态路由和动态路由进行合并</p> <p><strong>路由主文件</strong> <strong><code>src/router/index.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 引入多个模块的规则</span>
<span class="token keyword">import</span> approvalsRouter <span class="token keyword">from</span> <span class="token string">'./modules/approvals'</span>
<span class="token keyword">import</span> departmentsRouter <span class="token keyword">from</span> <span class="token string">'./modules/departments'</span>
<span class="token keyword">import</span> employeesRouter <span class="token keyword">from</span> <span class="token string">'./modules/employees'</span>
<span class="token keyword">import</span> permissionsRouter <span class="token keyword">from</span> <span class="token string">'./modules/permissions'</span>
<span class="token keyword">import</span> attendancesRouter <span class="token keyword">from</span> <span class="token string">'./modules/attendances'</span>
<span class="token keyword">import</span> salarysRouter <span class="token keyword">from</span> <span class="token string">'./modules/salarys'</span>
<span class="token keyword">import</span> settingsRouter <span class="token keyword">from</span> <span class="token string">'./modules/settings'</span>
<span class="token keyword">import</span> socialsRouter <span class="token keyword">from</span> <span class="token string">'./modules/socials'</span>

<span class="token comment">// 动态路由</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> asyncRoutes <span class="token operator">=</span> <span class="token punctuation">[</span>
  approvalsRouter<span class="token punctuation">,</span>
  departmentsRouter<span class="token punctuation">,</span>
  employeesRouter<span class="token punctuation">,</span>
  permissionsRouter<span class="token punctuation">,</span>
  attendancesRouter<span class="token punctuation">,</span>
  salarysRouter<span class="token punctuation">,</span>
  settingsRouter<span class="token punctuation">,</span>
  socialsRouter
<span class="token punctuation">]</span>
<span class="token keyword">const</span> <span class="token function-variable function">createRouter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// mode: 'history', // require service support</span>
  <span class="token function-variable function">scrollBehavior</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>constantRoutes<span class="token punctuation">,</span> <span class="token operator">...</span>asyncRoutes<span class="token punctuation">]</span> <span class="token comment">// 临时合并所有的路由</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><blockquote><p>通过上面的操作，我们将静态路由和动态路由进行了合并</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200827170403463.370673ad.png" alt="image-20200827170403463"></p> <p>当我们合并权限完成，我们惊奇的发现页面效果已经左侧的导航菜单 =》 路由页面</p> <p>这是之前基础模板中对于左侧导航菜单的封装</p> <p><img src="/hrsass-notes/assets/img/image-20200720003233026.163c1fef.png" alt="image-20200720003233026"></p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>： 将静态路由和动态路由临时合并，形成左侧菜单</p> <h2 id="左侧菜单的显示逻辑-设置菜单图标"><a href="#左侧菜单的显示逻辑-设置菜单图标" class="header-anchor">#</a> 左侧菜单的显示逻辑，设置菜单图标</h2> <p><strong><code>目标</code></strong>  解析左侧菜单的显示逻辑，  设置左侧导航菜单的图标内容</p> <blockquote><p>上小节中，我们集成了路由，菜单就显示内容了，这是为什么 ？</p></blockquote> <p><strong>阅读左侧菜单代码</strong></p> <blockquote><p>我们发现如图的逻辑</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200828103109646.d46e591e.png" alt="image-20200828103109646"></p> <p>由于，该项目不需要二级菜单的显示，所以对代码进行一下处理，只保留一级菜单路由</p> <p><strong><code>src/layout/components/Sidebar/SidebarItem.vue</code></strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>!item.hidden<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hasOneShowingChild(item.children,item) &amp;&amp; (!onlyOneChild.children||onlyOneChild.noShowingChildren)&amp;&amp;!item.alwaysShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-link</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onlyOneChild.meta<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>resolvePath(onlyOneChild.path)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu-item</span> <span class="token attr-name">:index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>resolvePath(onlyOneChild.path)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{<span class="token punctuation">'</span>submenu-title-noDropdown<span class="token punctuation">'</span>:!isNest}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item</span> <span class="token attr-name">:icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onlyOneChild.meta.icon||(item.meta&amp;&amp;item.meta.icon)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onlyOneChild.meta.title<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- &lt;el-submenu v-else ref=&quot;subMenu&quot; :index=&quot;resolvePath(item.path)&quot; popper-append-to-body&gt;
      &lt;template slot=&quot;title&quot;&gt;
        &lt;item v-if=&quot;item.meta&quot; :icon=&quot;item.meta &amp;&amp; item.meta.icon&quot; :title=&quot;item.meta.title&quot; /&gt;
      &lt;/template&gt;
      &lt;sidebar-item
        v-for=&quot;child in item.children&quot;
        :key=&quot;child.path&quot;
        :is-nest=&quot;true&quot;
        :item=&quot;child&quot;
        :base-path=&quot;resolvePath(child.path)&quot;
        class=&quot;nest-menu&quot;
      /&gt;
    &lt;/el-submenu&gt; --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p><strong><code>本节注意</code></strong>：通过代码发现，当路由中的属性**<code>hidden</code>**为true时，表示该路由不显示在左侧菜单中</p> <blockquote><p>与此同时，我们发现左侧菜单并不协调，是因为缺少图标。在本项目中，我们的图标采用了SVG的组件</p></blockquote> <p>左侧菜单的图标实际上读取的是meta属性的icon，这个icon需要我们提前放置在**<code>src/icons/svg</code>**目录下</p> <blockquote><p>该资源已经在菜单svg目录中提供，请将该目录下的所有svg放到**<code>src/icons/svg</code>**目录下</p></blockquote> <p>具体的icon名称可参考<a href="https://panjiachen.github.io/vue-element-admin/#/icon/index" target="_blank" rel="noopener noreferrer">线上地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>functional为true，表示该组件为一个函数式组件</p> <p>函数式组件： 没有data状态，没有响应式数据，只会接收props属性， 没有this， 他就是一个函数</p> <p><strong>模块对应icon</strong></p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>├── dashboard           <span class="token comment"># dashboard</span>
├── departments         <span class="token comment"># tree</span>
├── employees           <span class="token comment"># people</span>
├── setting             <span class="token comment"># setting</span>
├── salarys             <span class="token comment"># money</span>
├── social              <span class="token comment"># table</span>
├── attendances         <span class="token comment"># skill</span>
├── approvals           <span class="token comment"># tree-table</span>
├── permission          <span class="token comment"># lock</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="/hrsass-notes/assets/img/image-20200720010016813.99eae4d1.png" alt="image-20200720010016813"></p> <p>按照对应的icon设置图标</p> <p><strong><code>本节任务：</code></strong> 理解左侧菜单的生成逻辑，并设置左侧菜单的图标</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/hrsass-notes/assets/js/app.6c8c6ef7.js" defer></script><script src="/hrsass-notes/assets/js/2.dbebf407.js" defer></script><script src="/hrsass-notes/assets/js/9.c7557c6f.js" defer></script>
  </body>
</html>