How to convert vue backend menu data to dynamic routing table

The format returned by the

backend is as follows. I want to convert it to the routing table of vue, but I can"t figure it out for a long time. The last child node sub is empty. Can you give me some guidance?
"menus": [{

        "id": 1,
        "pid": null,
        "name": "",
        "premission": "",
        "remark": null,
        "createtime": "2018-10-31T00:28:56.000+0000",
        "createuser": "",
        "modifytime": "2018-11-14T03:03:25.000+0000",
        "modifyuser": "",
        "deltag": 0,
        "subs": [{
            "id": 2,
            "pid": 1,
            "name": "",
            "premission": "sys:user:list",
            "remark": null,
            "createtime": "2018-10-31T01:43:25.000+0000",
            "createuser": "",
            "modifytime": "2018-11-14T03:03:25.000+0000",
            "modifyuser": "",
            "deltag": 0,
            "subs": [{
                "id": 3,
                "pid": 2,
                "name": "",
                "premission": "sys:user:add",
                "remark": "",
                "createtime": "2018-10-31T01:43:25.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:03:25.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "",
                "component": null,
                "selected": null
            }, {
                "id": 4,
                "pid": 2,
                "name": "",
                "premission": "sys:user:update,sys:user:info",
                "remark": null,
                "createtime": "2018-11-14T03:16:04.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:16:07.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "",
                "component": null,
                "selected": null
            }, {
                "id": 5,
                "pid": 2,
                "name": "",
                "premission": "sys:user:del",
                "remark": null,
                "createtime": "2018-11-16T19:41:13.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:03:25.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "",
                "component": null,
                "selected": null
            }, {
                "id": 6,
                "pid": 2,
                "name": "",
                "premission": "sys:user:prem,sys:role:list",
                "remark": null,
                "createtime": "2018-11-16T19:41:30.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:03:25.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "",
                "component": null,
                "selected": null
            }],
            "isfunc": null,
            "icon": "fa fa-users",
            "url": "/sys/user/list.html",
            "pidname": "",
            "component": null,
            "selected": null
        }
Mar.07,2022

is easy to write. With this structure, you can loop the data and generate the corresponding routing data

.
Menu