vue根据路由递归动态生成菜单

需求

• 根据路由数组，生成菜单数组，过滤掉隐藏的菜单

源数据

let arr = [
      {
        path: "/",
        name: "home",
        meta: {
          icon: "weibo",
          title: "首页",
        },
        redirect: "/dashboard/analysis",
        component: () => import("@/layouts/BasicLayout"),
        children: [
          {
            path: "/dashboard",
            name: "dashboard",
            component: { render: (h) => h("router-view") },
            children: [
              {
                path: "/dashboard/analysis",
                name: "analysis",
                component: () => import("@/views/Dashboard/Analysis"),
              },
            ],
          },
        ],
      },
      {
        path: "/order",
        name: "order",
        meta: {
          icon: "apple",
          title: "订单",
        },
        component: { render: (h) => h("router-view") },
        children: [
          {
            path: "/order/list",
            name: "orderlist",
            meta: {
              title: "订单列表",
            },
            component: () => import("@/views/Order/OrderList"),
          },
          {
            path: "/order/detail",
            name: "orderdetail",
            hiden: true,
            meta: {
              title: "订单详情",
            },
            component: () => import("@/views/Order/OrderDetail"),
          },
          {
            path: "/order/comment",
            name: "ordercomment",
            hiden: true,
            meta: {
              title: "订单评论",
            },
            component: () => import("@/views/Order/OrderComment"),
          },
          {
            path: "/order/comment1",
            name: "ordercomment1",
            meta: {
              title: "订单评论1",
            },
            component: () => import("@/views/Order/OrderComment"),
          },
        ],
      },
      {
        path: "/user",
        component: { render: (h) => h("router-view") },
        redirect: "/user/login",
        hiden: true,
        children: [
          {
            path: "/user/login",
            name: "Login",
            component: () => import("@/views/User/Login"),
          },
          {
            path: "/user/register",
            name: "Register",
            component: () => import("@/views/User/Register"),
          },
        ],
      },
    ];

方法一：删除数组中需要隐藏的项

bug1：删除数组中的某一项之后，后一项的索引会前移，但是该索引的循环已结束，会继续后续的循环，导致被删除这项的后一项没有被循环处理
解决：所以再走一次递归，只为了处理被遗漏的那一项，这样会导致其他被处理过的也会再循环一遍，不推荐

 mounted() {
    let menu = this.getArr(arr);
    console.log(menu); // 最终处理好的菜单
  },


methods: {
    getArr(arr) {
      arr.forEach((item, i) => {
        if (item.hiden) {
          arr.splice(i, 1);
          // bug1：删除数组中的某一项之后，后一项的索引会前移，但是该索引的循环已结束，会继续后续的循环，导致被删除这项的后一项没有被循环处理
          // 解决：所以再走一次递归，只为了处理被遗漏的那一项，这样会导致其他被处理过的也会再循环一遍，不推荐
          this.getArr(arr);
        } else if (item.children) {
          this.getArr(item.children);
        }
      });
      return arr;
    },

方法二：定义一个空数组来重新生成一个新数组（推荐）

  mounted() {
   	 this.getArr(arr, this.menu); // 最终处理好的菜单
  },
  methods: {
    getArr(arr, list) {
      arr.forEach((item) => {
        if (!item.hiden) {
          list.push(item);
          if (item.children) {
            // 这里使用一个变量接收子数组作为递归的数据源
            // 将item.children置空用来接收不隐藏的数据
            let a = item.children;
            item.children = [];
            this.getArr(a, item.children);
          }
        }
      });
    },
 }

有返回值的那种

export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}