需求
- 根据路由数组,生成菜单数组,过滤掉隐藏的菜单
源数据
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
}
}