问题
- 一个数组拥有全部数据
- 另一个数组只拥有部分数据
- 2个数组每层的相同字段有name,children
- 拥有全部数组数组要根据拥有部分数据的数组,过滤得到新的数组
代码
拥有全部数据的数组
let allRoutes = [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue'),
children: [
{
path: '/role',
name: 'role',
meta: {
tile: '角色'
},
component: () => import('@/views/role/index.vue'),
redirect: '/role/list',
children: [
{
path: 'create',
name: 'roleCreate',
meta: {
tile: '创建角色'
},
component: () => import('@/views/role/create.vue')
},
{
path: 'list',
name: 'roleList',
meta: {
tile: '角色列表'
},
component: () => import('@/views/role/list.vue')
},
{
path: 'update',
name: 'roleUpdate',
meta: {
tile: '修改角色'
},
component: () => import('@/views/role/update.vue')
}
]
},
{
path: '/adminUser',
name: 'adminUser',
meta: {
tile: '管理员'
},
component: () => import('@/views/adminUser/index.vue'),
children: [
{
path: 'create',
name: 'adminUserCreate',
meta: {
tile: '创建管理员'
},
component: () => import('@/views/adminUser/create.vue')
},
{
path: 'list',
name: 'adminUserList',
meta: {
tile: '管理员列表'
},
component: () => import('@/views/adminUser/list.vue')
},
{
path: 'update',
name: 'adminUserUpdate',
meta: {
tile: '修改管理员'
},
component: () => import('@/views/adminUser/update.vue')
}
]
}
]
},
{
path: '*',
name: '404',
component: () => import('@/views/404.vue')
}
]
拥有部分数据的数组
let someRoutes = [
{
name: 'home',
children: [
{
name: 'role',
children: [{ name: 'roleList' }, { name: 'roleUpdate' }]
},
{
name: 'adminUser',
children: [
{ name: 'adminUserCreate' },
{ name: 'adminUserList' },
{ name: 'adminUserUpdate' }
]
}
]
}
]
最终想要过滤得到的结果
没有name: 'roleCreate'
,这一层
{
path: 'create',
name: 'roleCreate',
meta: {
tile: '创建角色'
},
component: () => import('@/views/role/create.vue')
},
想要过滤得到的数组
let allRoutes = [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue'),
children: [
{
path: '/role',
name: 'role',
meta: {
tile: '角色'
},
component: () => import('@/views/role/index.vue'),
redirect: '/role/list',
children: [
{
path: 'list',
name: 'roleList',
meta: {
tile: '角色列表'
},
component: () => import('@/views/role/list.vue')
},
{
path: 'update',
name: 'roleUpdate',
meta: {
tile: '修改角色'
},
component: () => import('@/views/role/update.vue')
}
]
},
{
path: '/adminUser',
name: 'adminUser',
meta: {
tile: '管理员'
},
component: () => import('@/views/adminUser/index.vue'),
children: [
{
path: 'create',
name: 'adminUserCreate',
meta: {
tile: '创建管理员'
},
component: () => import('@/views/adminUser/create.vue')
},
{
path: 'list',
name: 'adminUserList',
meta: {
tile: '管理员列表'
},
component: () => import('@/views/adminUser/list.vue')
},
{
path: 'update',
name: 'adminUserUpdate',
meta: {
tile: '修改管理员'
},
component: () => import('@/views/adminUser/update.vue')
}
]
}
]
}
]
这个实现有点缺陷,执行完之后allRoutes也会跟着发生变化,要避免这个副作用的话可以这么写