將經過 pid 肯定上下級關係的數據轉成 children 的格式

上次寫了一篇 《前端權限管理之 addRoutes 動態加載路由踩坑》 ，獲得了許多熱心網友的點評並指出了其中的不足，其中針對轉換的函數只能支持二級路由的狀況，我對函數作了一次優化。

需求

• 將經過 pid 確認數組內元素上下級關係的數據格式轉換成適合 element-ui 和 iview 等現代UI庫渲染樹形結構的屬性，即經過 children 確認上下級關係。

• 支持多層級關係的樹形結構

流程圖

實現代碼

// 初始化路由信息對象
  const menusMap = {};
  let parentNode = {};
  const root = [];

  menus.map(v => {
    const { path, name, component, redirect, hidden, meta } = v
    let item = { // 從新構建路由對象
      path,
      name,
      component: () => import(`@/views/${component}`), // 路由的文件路徑
      redirect,
      hidden: Boolean(hidden) // 數據庫表中存儲爲 0 和 1
    }
    meta.length !== 0 && (item.meta = JSON.parse(meta));
    menusMap[v.id] = item;

    // 判斷是否爲根節點
    if (v.pid === 0) {
      root.push(item);
    } else {
      parentNode = menusMap[v.pid];
      !parentNode.children && (parentNode.children = []);
      parentNode.children.push(item);
    }
  })
  
  return root; // 返回已經轉換完格式的結果
複製代碼

萌新一枚，歡迎批評~