Skip to content

simon9124/iview-dynamicRouter

 
 

Repository files navigation

iView DynamicRouter

iView-DynamicRouter 基于 iview-admin(branch:template),由“后端动态提供路由数据,经前端处理后生成动态路由和菜单”的【后端动态路由模板】,内置“权限管理”业务模型,可任意调整左侧菜单栏、修改其相关权限、监听当前路由和菜单,是一套更安全、更智能的后台管理系统模板。

在线预览

在控制台可监听 当前路由和菜单

使用文档

如果你想快速使用,请看 配置文档 →
如果你想和我一起,从 iview-admin 的原始框架一步步实现 iView-DynamicRouter,请看 开发指南 →

功能特点

登录后,不同权限的用户监听到不同的动态路由动态菜单

菜单自由选择上级、自由增删改

自由选择菜单的层级,大屏路由亦可在子菜单挂载:

修改“角色-菜单”关联,控制菜单权限

功能汇总:

- 动态路由数据
  - 路由改造(静态路由+动态路由)
  - 路由数据处理
  - 手动添加路由
  - 路由清空
  - 路由监听

- 动态菜单渲染
  - 菜单数据处理(大屏路由在二级/多级菜单)
  - 菜单监听

- 动态模拟数据mockData
  - 用户列表、角色列表、路由列表、路由层级

- 权限管理
  - 用户管理(增删改查、用户1对多绑定角色)
  - 角色管理(增删改查、角色1对多绑定菜单)
  - 菜单管理(增删改查、修改层级、修改上级目录)
  - 纯前端也可控制路由权限

目录结构

- config  开发相关配置
- public  打包所需静态资源
- src
  - api  AJAX请求   -> 追加:动态获取路由方法
  - assets  项目静态资源
  - icons  自定义图标资源
  - images  图片资源
  - components  业务组件
  - config  项目运行配置
  - directive  自定义指令
  - libs  封装工具函数   -> 追加:若干路由数据处理函数
  - locale  多语言文件
  - mock  mock模拟数据   -> 追加:路由列表、路由层级、角色列表 等数据
  - router  路由配置   -> 有较多改动,路由改造
  - store  Vuex配置   -> 有较多改动,菜单渲染改造
  - view  页面文件   -> 追加【权限管理】模块、追加 template.vue 和 screent.vue 页面模板
  - tests  测试相关

安装使用

# 克隆项目
git clone https://github.com/simon9124/iview-dynamicRouter

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 本地开发 启动项目
npm run dev

如果这个模板或模板中的代码段能够在开发中帮助到你,请到在 项目地址 的右上角 ⭐ 一下,更可以买一杯果汁表示鼓励 🍹,非常感谢!

权限控制

启动完成后,在控制台可监听【当前路由】和【左侧菜单】:

权限管理 - 菜单管理,可任意新增/更新菜单、修改层级、修改上级目录:

权限管理 - 角色管理,可任意新增/更新角色、修改角色关联的菜单:

权限管理 - 用户管理,可任意新增/更新用户、修改用户关联的角色:

实现路由权限控制:

大屏路由在二级/多级菜单亦可挂载:

Packages

No packages published

Languages

  • Vue 96.3%
  • CSS 3.7%