Question

我正在与VueJS，Lodash和Babel进行一个项目，我的问题是我需要在我的应用程序中使用来自 routes.js 文件的路径填充侧边栏。问题是我真的不知道如何检索我需要的数据。

export default [
  {
    path: "/admin/login",
    name: "admin.login",
    component: Login
  },
  {
    path: "/admin",
    component: MasterLayout,
    meta: { auth: true },
    children: [
      {
        path: "/admin/dashboard",
        alias: "/",
        menu: { text: "", icon: ""},
        name: "admin.dashboard",
        component: DashboardIndex
      }
    ]
  },
  {
    path: '/403',
    name: 'error.forbidden',
    component: ErrorForbidden
  },
  {
    path: "*",
    name: 'error.notfound',
    component: ErrorPageNotFound
  }
];

那是我的路线文件，我基本上需要遍历每条路线，检查它是否有孩子或菜单属性，如果它有一个菜单就会被添加到我的侧边栏项目列表，并且它们的子项也被添加，并且它们自己的菜单属性被撤销

最后我想得到类似下面的内容

sidebarItems: [
 {
  name: 'Dashboard',
  icon: 'dashboard',
  name: 'admin.dashboard'
 }, 
 {
  name: 'OtherRoute',
  icon: 'other-route',
  name: 'admin.other-route',
  children: [
    {
      name: 'SubRoute',
      icon: 'sub-route',
      name: 'admin.sub'
    }
  ]
 }
]

这应仅考虑包含菜单属性的路线。

Answer 1

你基本上需要对数组进行迭代递归，所以请试试这个：

function iterateArrayRoutes(routeArray) {
  if(routeArray instanceof Array) {
    var routeFormatted = routeArray.reduce(function(last, route){
      if (route.hasOwnProperty("menu")) {
        var item = {
          name: route.name,
          icon: route.menu.icon
        };
        if(route.hasOwnProperty("children") && route.children.length > 0) {
          item.children = iterateArrayRoutes(route.children);
        }
        last.push(item);
      }
      return last;
    }, []);
    return routeFormatted;
  }
};

您可以在这里进行演示https://jsfiddle.net/vm1hrwLL/

ES6从嵌套对象

1 个答案: