后管系统-路由和页面模块步骤分析

1.优化路由守卫的功能 路由跳转时 只请求一次

• 当userId已经有了就不再次发请求了 在路由守卫中对userId做判断

2.动态路由

2.1 拆分静态路由表和动态路由表 组合到一起组成路由表

• 静态路由表：不需要做权限控制的路由，每个用户都可以正常访问。

• 动态路由表：需要做权限控制的路由，用户如果权限不一致访问到的路由也不一样。

2.2 模块化管理动态路由

• 把每一个路由配置单独写在一个文件中，然后再统一导入使用
• 每一个单独的文件中都需要导入Layout 和 默认导出
• 再将所有的动态路由模块导入router/index.js中
• 在router/index.js中组合动态路由模块 菜单中显示的顺序在此处可以调整

2.3 在meta属性中可以通过title 和 icon对菜单中的标题和图标进行设置

• 图标可以通过第三方svg进行下载使用

3.动态设置标题

3.1 在src/permission.js中 导入工具方法getPageTitle

3.2 添加一个路由守卫

 

4.组织架构-用树形组件完成主体布局

• data 中默认 label 为节点标签的文字，children 为子节点 (可以通过 props 修改默认配置 )
• default-expand-all属性为true，可以控制tree组件默认展开所有的子节点
• 用el-tree的插槽来自定义内容

5.接口真实数据渲染

5.1 封装一个api接口

5.2 在views/departments/departments.vue组件中：导入定义好的api里的函数 通过created钩子函数调用

• 导入api时注意要对定义的函数进行解构
• 需要用shift删除数组中的第一个数据