通过map解决导航路由递归问题

简介: 通过map解决导航路由递归问题

问题描述

如何将对象树转换为路由导航,如下图所示

image.png

数据源

const menuList = [
    {
        title: '首页', // 菜单标题名称
        key: '/home', // 对应的path
        icon: <HomeOutlined />, // 图标名称
    },
    {
        title: '商品',
        key: '/products',
        icon: <AppstoreOutlined />,
        children: [ // 子菜单列表
            {
                title: '品类管理',
                key: '/category',
                icon: <DatabaseOutlined />
            },
            {
                title: '商品管理',
                key: '/product',
                icon: <ToolOutlined />
            },
        ]
    },
    {
        title: '用户管理',
        key: '/user',
        icon: <UserOutlined />
    },
    {
        title: '角色管理',
        key: '/role',
        icon: <SafetyOutlined />,
    },
    {
        title: '图形图表',
        key: '/charts',
        icon: <AreaChartOutlined />,
        children: [
            {
                title: '柱形图',
                key: '/charts/bar',
                icon: <BarChartOutlined />
            },
            {
                title: '折线图',
                key: '/charts/line',
                icon: <LineChartOutlined />
            },
            {
                title: '饼图',
                key: '/charts/pie',
                icon: <PieChartOutlined />
            },
        ]
    },
]
复制代码

通过map进行递归操作

getTreeNodes = (menuList) => {
        return menuList.map(item => {
            if (!item.children) {
                return {title: item.title, key: item.key}
            } else {
                return {title: item.title, key: item.key, children: this.getTreeNodes(item.children)}
            }
        })
    }


相关文章
|
6月前
|
JavaScript 前端开发 Java
ztree实现左边动态生成树,右边为具体信息功能
ztree实现左边动态生成树,右边为具体信息功能
26 0
|
13天前
|
JavaScript 前端开发
vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程
这是一个Vue.js组件代码示例,展示了带有侧边栏导航和面包屑导航的布局。模板中使用Element Plus组件库,包含可折叠的侧边栏,其中左侧有 Logo 和导航列表,右侧显示更具体的子菜单。`asideDisplay`控制侧边栏宽度。在`script`部分,使用Vue的响应式数据和生命周期钩子初始化路由相关数据,并从localStorage恢复状态。样式部分定义了组件的颜色、尺寸和布局。
32 1
|
13天前
|
前端开发
子路由的配置方法
子路由的配置方法
10 0
|
13天前
|
负载均衡 JavaScript 网络协议
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
64 1
|
5月前
|
JavaScript
Vue路由 replace属性 控制浏览记录不能前进或后退
Vue路由 replace属性 控制浏览记录不能前进或后退
|
10月前
|
JavaScript 容器
Vue中实现路由跳转的三种方式详细分解
Vue中实现路由跳转的三种方式详细分解
158 0
|
前端开发 JavaScript 数据格式
el-menu导航菜单的二次封装(递归组件)实现动态多级菜单
el-menu导航菜单的二次封装(递归组件)实现动态多级菜单
554 0
|
JavaScript
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
|
Web App开发 算法 JavaScript
vue-router 还给路由排了序?解析路由匹配,vue-router Matcher 解析(三)
之前的两篇文章讲了, vue-router 的 Matcher 对初始的 routes 进行了标准化(normalized)处理以及别名(alias)处理,但还有matcher 处理 route 的匹配

热门文章

最新文章