1.Ajax取到数据,对数据加工,然后动态添加到router里

 created() {
    let routerChildrenList = setAsyncRouters();
    this.leftMenu = elMenuData;
    routerChildrenList
      .then((res) => {
        res.unshift({
          path: "/page0",
          name: "page0",
          component: () => import("@/views/pages/page0.vue"),
        });
        let routerItem = {
          path: "/index",
          name: "index",
          component: () => import("@/views/index/index.vue"),
          children: res,
          redirect: res[0].name,
        };
        let routerList = [routerItem];
        this.$router.addRoutes(routerList);
      })
      .catch((err) => {
        console.log(err);
      });
  }

加工函数

import asyncRouters from './asyncRouter'

const asyncRoutes = []

for(let i=1;i<=10;i++){
  let routeItem = {
    path : '/page'+i,
    name : 'page'+i,
    component : ()=>import(`@/views/pages/page${i}.vue`)
  }
  asyncRoutes.push(routeItem)
}

function getAsyncRouters(){
 return new Promise((resolve)=>{ // 模拟ajax获取el-menu的数据
   setTimeout(() => {
     resolve(asyncRouters)
   }, 500);
 })
}

function buildRoute(routerList){
  let childList = [];
  function createChildRouter(list){
    if(!list) return;
    for(let i=0;i<list.length;i++){
      if(list[i]){
        let name = list[i].name;
        let routeItem = asyncRoutes.find(item=>item.name===name)
        if(routeItem){ // 有路由
           childList.push(routeItem)
           if(list[i].children.length!==0){
            createChildRouter(list[i].children)
          }
        }
      }
    }
  }
  createChildRouter(routerList)
  return childList
}

export async function setAsyncRouters(){
  let routers = await getAsyncRouters();
  let children = buildRoute(routers) 
  return children
}```
模拟数据

```javascript
export default [
    {
        name : 'page1',
        path : '/page1',
        children : [
            {
                path : '/page4',
                name : 'page4',
                children : []
            },
            {
                path : '/page5',
                name : 'page5',
                children : [
                    {
                        path : '/page6',
                        name : 'page6',
                        children : []
                    },
                    {
                        path : '/page7',
                        name : 'page7',
                        children : []
                    }
                ]
            },
            {
                path : '/page8',
                name : 'page8',
                children : []
            }
        ]
    },
    {
        name : 'page2',
        path : '/page2',
        children : []
    },
    {
        name : 'page3',
        path : '/page3',
        children : [
            {
                path : '/page9',
                name : 'page9',
                children : []
            },
            {
                path : '/page10',
                name : 'page10',
                children : []
            }
        ]
    }
]

效果
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐