vue路由的数据处理：利用程序自动更新多级路由的侧边栏视图
站长
· 阅读数 58
本来我们配置路由的时候，会把1级路由和2级混着写，这样方便配置视图。
但是，为了更方便将我们的路由转换成侧边栏，我们需要将路由数据改写成层级明显的数组格式。
即父路由里面有个children属性，这个属性用来存储多个不同的子路由对象。
第一张图有点糊，重点看后面两张！
原始路由长这样：
原来的parent在里面，我们要扯出来，然后有相同parent的路由全部塞到children里面去。
需要处理成这样
为什么要如此大费周章？
整理完成的数组，我们注入组件。
没有子路由（也就是没有children）就这届拿icon/label数据生成一级菜单。
若有子路由，照样先把一级菜单生成，在其下面再遍历children数组，生成多个子菜单。
这样做好处是啥?
后续我们增加路由，只要按照规定的格式书写，都可以被程序自动转化成我们的目标数组。然后视图是根据数组生成的，所以视图也会随之变化。
具体实现
利用数组menusMap存储结果
存储的时候以name为属性，对应的路由信息为属性值。
没有parent的肯定是一级路由，直接存入
有parent则是二级路由，首次存入需要创建children属性，后续直接push即可。
备注：最后拿到的menusMap其实是个对象而并非我们要的对象数组，这里他的属性其实是没用的，我们只需要属性值。这个很好办，用Object.values(menusMap)处理即可
转载自:https://juejin.cn/post/7244471654508052540