动态路由的实际场景和数据梳理

此文章涉及根据后端返回路由列表进行动态路由的设置与添加

若需要涉及权限请 点击这里 查看权限路由设置，可结合使用

流程：

1：首先查看后端返回数据结构（若不好处理，直接特喵的让后端改[狗头]），

2.封装递归处理 component组件注入格式

3.使用递归函数并进行addRoute，注意是addRoute（addRouter已经是过去式了）

4.最后存储到vuex，方便后续使用

代码示例

1.模拟数据结构

routerList:[{
        path: '/systemSettings',
        title: '系统设置',
        component:'/monitor/systemSettings/systemSettings',
        meta: {
          title: '系统设置',
          icon: 'el-icon-mobile',
          menuPermission: 'monitor'
        },
        children: [
          {
            path: '/LabelSettings',
            title: '标签设置',
            component:'/monitor/systemSettings/LabelSettings',
            meta: {
              title: '标签设置',
              icon: 'el-icon-mobile',
              menuPermission: 'monitor'
            }
          }, {
            path: '/richTextSettings',
            title: '富文本设置',
            component:'/monitor/systemSettings/richTextSettings',
            meta: {
              title: '富文本设置',
              icon: 'el-icon-mobile',
              menuPermission: 'monitor'
            }
          }
        ]
      },]

2.封装递归处理

//转换路由函数
    const loadView = (view) => { 
      return (resolve) =>  require([`@/views${view}`], resolve)
    }
    let routerFun=(data)=>{
      return data.filter(route => {
      if (route.component) {
        // console.log(route.component);
           route.component = loadView(route.component)
        }
      // 如果有子路由，则采用递归的方式
        if (route.children != null && route.children.length>0) {
          route.children = routerFun(route.children)
        }
        return true
      })
    }

我是在login页面进行的处理，根据实际需求而定

3.动态添加路由

const arr=routerFun(this.routerList)
    arr.push({ path: '*', redirect: '/404', hidden: true });
    //存储到vuex
    store.state.routerList=arr
    //遍历注册路由
    arr.forEach((item)=>{ 
      router.addRoute('home',item)
    })

废话！

我也仅是一个普普通通的前端工作者，有任何细节方面问题，可在评论区指导。

虚心接受，努力提升自己正是我们最好的状态

希望对你能有所帮助