动态菜单栏

要求

根据接口数据动态设置菜单，层级层列都不确定。同时获取到菜单栏之后，每个栏位还需要单独二次请求接口获取栏位的数量。父节点数量需要前端处理，将所有子节点栏位加起来。

三个未知：

栏位未知，层级未知，详情页面未知。

问题

1. 菜单栏层级列数都不确定，需要根据后端数据渲染，怎么处理？
   这边需要用到组件递归。项目用的是element的el-menu。
2. 菜单栏层级列数都不确定，每个栏位需要请求不同的接口获取数据，且要渲染到对应栏位展示。不确定的多层栏位怎么请求接口。
   设置了一个变量，将菜单栏赋值。然后变量递归，根据获得的接口数据对变量参数进行修改。
3. 且怎么更新多不确定的多层栏位的组件上？
   对组件进行ref设置。递归组件的refs，依次强制更新。
4. 点击菜单栏跳转不同详情页面，栏位数量未知那详情页面也位置，页面怎么处理才能实时根据不同菜单展示数据？
   和后端确定，栏位信息设置type，且type相同需要跳转相同模版页面，根据携带的数据不同，页面展示不同数据。router-view使用keep-alive，将路由信息设置为key。这样路由信息不同页面会重新actived。再设置几套页面模板。根据type不同跳转不同模板进行页面渲染。
5. 详情页面的信息都在菜单栏上，怎么在点击的时候能取得这些栏位信息。
   可以放在路由meta上，点击菜单的时候动态设置meta。详情页进去的时候，钩子函数监听获取这些数据。
6. 层级未知，父节点数量需要将所有子节点栏位加起来，怎么相加？
   使用computed，传入你当前节点的数据，递归数据当前节点数据。这样可以计算你下面所有子节点的数据。