五、路由_页面

现有路由页面整理

• 删除不需要的页面及组件配置和基础模板中附带的多余页面（views中）以及路由中的路由定义

根据权限不同动态生成功能菜单的整体思路

1. 最终效果是：不同用户登陆进来时，显示出来的菜单功能是不同的

2. 静态路由表和动态路由表

   • 静态：不需要权限就可以访问的
   • 动态： 总共有8个功能，会根据后端返回的权限信息，来动态决定能显示几个功能

   4.模块化管理动态路由

   合并静态和动态路由

   const asyncRoutes = [
     employeesRouter......
   ]
   export const constantRoutes = [
     {
       path: '/login',
       component: () => import('@/views/login/index'),
       hidden: true
     }......
   ]
   const createRouter = () => new Router({
    // routes: [...constantRoutes, ...asyncRoutes] // 临时合并所有的路由
       routes: constantRoutes.concat(asyncRoutes)
   })
   const router = createRouter()
   export default router
   
   

   左侧菜单

3. 在计算属性里 获取路由信息

computed: {
      routes() {
         // this.$router.options.routes可以拿到完整的路由表数据
         return this.$router.options.routes
      }

2.在标签中循环生成左侧路由列表

3.定义路由时， 设置属性：hidden: true，可以不在左侧菜单列表中显示

4.meta作用：

😊配置此路由的标题title title：""

😂配置组件是否需要缓存 keepAlive: true //缓存

😊配置icon属性为设置路由图标做准备

😃用$router.meta获取meta中的属性

设置菜单图标

 <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
        </el-menu-item>

1. 左侧菜单的文字读取的是meta属性的title属性
2. 左侧菜单的图标读取的是meta属性的icon属性，meta的icon属性名匹配src/icons/svg目录下的svg图标名称即可显示图标

操作步骤

1. 准备svg图片。把拷贝svg图标到项目中

   该资源已经在资料svg目录中提供，请将该目录下的所有svg 复制粘贴到**src/icons/svg**目录下

2. 修改icon名字

   名字从哪里来：

   ​ 具体的icon名称可参考线上地址

   ​ 这里有单独列出来，如下：各个模块对应的标题及icon名

   ├── dashboard    主页        # dashboard
   ├── departments  组织架构    # tree    
   ├── employees    员工        # people
   ├── setting      公司设置    # setting
   ├── salarys      工资        # money
   ├── social       社保        # table
   ├── attendances  考勤        # skill
   ├── approvals    审批        # tree-table
   ├── permission   权限        # lock
   

   代码写在哪里

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

svg图标的处理-工程化的方案

1. 安装loader

npm i svg-sprite-loader@4.1.3

2.配置vue.config.js

chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }

3.创建一个svg图标的组件

src\components\SvgIcon\index.vue

4.创建icons文件夹，在index.js中注册成全局组件

src\icons\index.js

svg目录下，保存从别处收集到的svg图片

5.在main.js中引入icons/index.js

6.使用组件

<svg-icon icon-class="tree" />
<svg-icon icon-class="user" />//user对应svg目录下的文件名

icon-class中的tree, user 对应下图中

svg下对应的图片。

下载svg

svg是一种通过代码方式展示的图片格式

学习网站：https://www.runoob.com/svg/svg-tutorial.html

下载：https://www.iconfont.cn/

• 新建.svg文件，上复制代码粘过来

把.svg放在src/icons/svg下

使用

  <svg-icon icon-class="qq1" />

qq1就是上边的.svg的文件名。