Как VUEJS построить многоуровневый(вложенный) роутинг?

Question

[Александр]

Имеется многоуровневая структура
Район->Микрорайоны->Улицы->Дома
Например Район имеет поля:

• ID
  
• alias
  
• title
  
• microrayons:[]
  

Микрорайонов может быть несколько и они имеют подобную структуру

• ID
  
• alias
  
• title
  
• streets:[]
  

имеется массив/объект улиц, соответсвенно улицы содержат дома и так далее
нужно чтобы открыв район, человек увидел список микрорайонов, кликнув по микрораону - увидел список улиц .....
я сделал отдельные компоненты : Район, Микрорайон, Улица, Дом
и теперь нужно прописать роутинг с вложенными путями
мне хочется чтоб путь выглядел так:
/район/45-микрорайон/11-улица/33-дом

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

не работает таким образом, что неправильно?

Comments

[Artem0071]

У вас в Rayons, Microrayon, Street есть router-view?

[Александр]

есть в корневом компоненте router-view и в шаблонах компонентов

// Microrayon
<template>
    <div>
        <h1>Микрорайон</h1>
        <router-view></router-view>
    </div>
</template>

[Александр]

Александр, нет совпадения в маршруте, выдает 404 маршрут {path: '*', component: 404}

Answer 1

[Evgeny Kulakov]

Возможно косяк в названии динамического параметра, т.е. роут у вас будет находится если задать вот такой урл: /rayon/45/11/33. Т.е. все что после двоеточия он воспринимает как динамически параметр.

Comments

[Александр]

const routes = [
    {path: '/', name: 'home',  component: Home},
    {path: '/rayons', name: 'rayons',  component: Rayons},
    {path: '/:rayID-rayon', name: 'rayon',  component: Mahallesi,
        children:[
            {path: 'mahallesi', name: 'mahallesi', component: Mahallesi}
        ]
    }
    ];

переписал с именованными маршрутами
так работает