How to build multi-level (nested) routing in VUEJS?

Question

Vue.js

There is a multi-level structure
District->Microdistricts->Streets->Houses
For example District has fields:

• ID
  
• alias
  
• title
  
• microrayons:[]
  

There can be several microdistricts and they have a similar structure

• ID
  
• alias
  
• title
  
• streets:[]
  

there is an array / object of streets, respectively, the streets contain houses, and so on
, when opening the district, a person sees a list of microdistricts, by clicking on the microdistrict - he sees a list of streets .....
I made separate components: District, Microdistrict, Street, House
and now you need to register routing with nested paths,
I want the path to look like this:
/ district / 45-microdistrict / 11-street / 33-house

const routes = [
    {path: '/', component: Home},
    {path: '/rayon', component: Rayons,
        children:[
              {path: ':id-microrayon', component: Microrayon,
                    children:[
                          {path: ':id-street', component: Street}
                    ]
              }
          ]
    }
    ];

doesn't work that way, what's wrong?

Answer 1

Perhaps the jamb in the name of the dynamic parameter, ie. You will have a route if you set this URL: /rayon/45/11/33. Those. everything after the colon is treated as a dynamic parameter.