Vue dynamically add child routes?

1. For example, after logging in, I want to update the route dynamically according to the menu list returned by the backend, but as soon as I add Routes, I can only add the route to the outermost layer and ask: how to add the new route to the inner layer.
such as

        routes: [{
          path: "/login",
          name: "Login",
          component: Login
      },{
          path: "/",
          component: main,
          name: "main",
          children: [
              { path: "/aaa",component: aaa, name: "aaa"},
              {
                  path: "/bbb",
                  component: bbb,
                  name: "bbb",
                  children: [
                      //
                      // { path: "/ccc",component: ccc,name: "cccc",meta: {parentPath: "manageMain"}},
                     
                  ]
              }
            
          ]
      },{
          path: "/404",
          component: NotFound,
          name: "",
      },
      {
          path: "*",
          redirect: { path: "/404" }
      }

]

I want to add my new route to bbb"s children

Mar.12,2022

is it possible to directly overwrite the route you want to modify?

I gave it a try, and it seems to work.

import Test1 from '../views/Test1.vue'

let options = {
    routes:[
        {
            path:'/',
            redirect: '/test1',
        },
        {
            path:'/test1',
            name:'test1',
            component: Test1
        }
    ]
}
this.$router.addRoutes([
    {
        path: '/test1',
        name: 'test1',
        component: Test1,
        children:[
            {
                path: '/test2',
                name: 'test2',
                component: Test2,
            }
        ]
    }
])
this.$router.push({name:'test2'})

if mani is a frame page, then all menu routes must be recursively push into mani's child. So that the frame page can find the corresponding route

Menu