前言
根据大师兄 - Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏) 这篇文章了解到了目前对于前端的动态路由操作目前有两种方法:
第一种是花裤衩 - 手摸手,带你用 vue 撸后台 系列一(基础篇),因为本人没做过这块第一次做,看上去时候会觉得有点复杂,并且是对于角色进行管理,路由是由前端主要控制,并且会用到 vuex。
第二种就是看了大师兄 - Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)实现,也是本文主要方法,第一次尝试,这个方法也是需要后端同学比较配合,路由主要是由后端控制的。
第一步 后端准备
- 先放上后端返回的 json 对象
1 | [ |
以上是后端返回的 json 数据,这里别的其实都没什么问题,主要就是component
这里,因为这里后端是返回不了 路由能用的,所以我们需要格式化
第二部 前端获取及格式化
这里的一个重要点其实是格式化,格式化路由能用的格式然后通过
router.addRoutes()
加载进去
1 | var getRouter // 初始化一个判断是否有路由的getRouter |
Layout
这里是处理父级的,因为都是引用的相同位置
1 | import Layout from '@/views/layout/Layout' |
_import
这里是处理子组件引用的
1 | const _import = require('@/utils/_import_' + process.env.NODE_ENV) |
这样就把路由动态加载到了路由中啦~
附录 - element admin ui 排序
在element admin
框架中,左边菜单直接拿返回的路由 json 其实顺序会有问题,所以让后端在每个内容中加了个order
进行排序
1 | <sidebar-item |