将路由数据的数组隐藏到树数据结构中，该树数据结构可用于Vue路由器

Question

我有来自后端服务器的以下路由结构，我想将其传输到一个可以用作Vue路由配置的树结构中。

我被困在如何为每个孩子分割路径上，而没有其他与路径相关的属性

const flattenSideMenuData = [
{
path: '/1',
title: 'title1',
icon: <AppstoreOutlined />,
},
{
path: '/1/1-1',
title: 'title1-1',
icon: <MassageBoxOutOutlined />,
},
{
path: '/1/1-2',
title: 'title1-2',
icon: <MailOutlined />,
},
{
path: '/1/1-3',
title: 'title1-3',
icon: <MailOutlined />,
},
{
path: '/1/1-3/1-3-1',
title: 'title1-3-1',
icon: <MailOutlined />,
},
]

转换后，它将像：

{
path: '/1',
title: 'title1',
icon: <AppstoreOutlined />,
children: [
{
path: '/1-1',
title: 'title1-1',
icon: <MassageBoxOutOutlined />,
},
{
path: '/1-2',
title: 'title1-2',
icon: <MailOutlined />,
},
{
path: '/1-3',
title: 'title1-3',
icon: <MailOutlined />,
children: [
{
path: '/1-3-1',
title: 'title1-3-1',
icon: <MailOutlined />,
},
{
path: '/1-3-2',
title: 'title1-3-2',
icon: <AppstoreOutlined />,
},
{
path: '/1-3-3',
title: 'title1-3-3',
icon: <MassageBoxOutOutlined />,
},
],
},
],
}

Answer 1

我仍然不确定您真正想要的是什么，但这些路由将以动态的方式处理您的示例片段所显示的内容。您希望避免使用重复的代码，而是使用组件，这正是VueJS和React等框架除了反应性之外的设计目的。

{
path: '/:id',
component: () => import('@/app/component')
children: [
{
path: '/:id-:id',
component: () => import('@/app/component2')
children: [
{
path: '/:id-:id-:id',
component: () => import('@/app/component3')
}
]
}
]
}

路由/1将碰到第一个path并且将被示出为@/app/component，其中路由/1-1将被示为@/app/component2，依此类推。