Маршрут

Объект конфигурации, определяющий один маршрут. Набор маршрутов объединяется в массив Routes, чтобы определить конфигурацию Router. Маршрутизатор пытается сопоставить сегменты заданного URL с каждым маршрутом, используя параметры конфигурации, определённые в этом объекте.

Поддерживаются статические маршруты, маршруты с параметрами, перенаправления и маршруты с подстановочными шаблонами, а также пользовательские данные маршрутов и методы разрешения данных.

Подробные сведения об использовании см. в руководстве по маршрутизации.

Простая конфигурация

В следующем маршруте указано, что при переходе, например, по адресу /team/11/user/bob маршрутизатор создаёт компонент 'Team', содержащий дочерний компонент 'User'.

[{
  path: 'team/:id',
 component: Team,
  children: [{
    path: 'user/:name',
    component: User
  }]
}]

Несколько outlet

Следующий маршрут создаёт соседние компоненты с несколькими outlet. При переходе по адресу /team/11(aux:chat/jim) маршрутизатор создаёт компонент 'Team' рядом с компонентом 'Chat'. Компонент 'Chat' помещается в outlet 'aux'.

[{
  path: 'team/:id',
  component: Team
}, {
  path: 'chat/:user',
  component: Chat
  outlet: 'aux'
}]

Подстановочные шаблоны

В следующем маршруте используется нотация подстановочного шаблона, чтобы задать компонент, который создаётся независимо от того, куда вы переходите.

[{
  path: '**',
  component: WildcardComponent
}]

Перенаправления

В следующем маршруте свойство redirectTo используется, чтобы игнорировать сегмент заданного URL при поиске дочернего пути.

При переходе по адресу '/team/11/legacy/user/jim' маршрутизатор заменяет сегмент URL '/team/11/legacy/user/jim' на '/team/11/user/jim', а затем создаёт компонент Team, содержащий дочерний компонент User.

[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: 'legacy/user/:name',
    redirectTo: 'user/:name'
  }, {
    path: 'user/:name',
    component: User
  }]
}]

Путь перенаправления может быть относительным, как в этом примере, или абсолютным. Если изменить значение redirectTo в примере на абсолютный сегмент URL '/user/:name', результирующий URL также будет абсолютным: '/user/jim'.

Пустой путь

Конфигурации маршрутов с пустым путём можно использовать для создания компонентов, которые не «потребляют» сегменты URL.

В следующей конфигурации при переходе по адресу /team/11 маршрутизатор создаёт компонент 'AllUsers'.

[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: AllUsers
  }, {
    path: 'user/:name',
    component: User
  }]
}]

У маршрутов с пустым путём могут быть дочерние маршруты. В следующем примере при переходе по адресу /team/11/user/jim маршрутизатор создаёт компонент-обёртку, содержащий компонент пользователя.

Обратите внимание, что маршрут с пустым путём наследует параметры и данные родительского маршрута.

[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: WrapperCmp,
    children: [{
      path: 'user/:name',
      component: User
    }]
  }]
}]

Стратегия сопоставления

По умолчанию используется стратегия сопоставления пути 'prefix': маршрутизатор проверяет элементы URL слева направо, чтобы определить, соответствует ли URL указанному пути. Например, '/team/11/user' соответствует 'team/:id'.

[{
  path: '',
  pathMatch: 'prefix', //default
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]

Можно указать стратегию сопоставления пути 'full', чтобы путь охватывал весь неиспользованный URL. Это важно при перенаправлении маршрутов с пустым путём. В противном случае, поскольку пустой путь является префиксом любого URL, маршрутизатор применит перенаправление даже при переходе к целевому адресу, создав бесконечный цикл.

В следующем примере стратегия pathMatch со значением 'full' гарантирует, что маршрутизатор применит перенаправление только при переходе по адресу '/'.

[{
  path: '',
  pathMatch: 'full',
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]

Маршруты без компонентов

Можно совместно использовать параметры между соседними компонентами. Например, предположим, что два соседних компонента должны отображаться рядом и обоим требуется параметр ID. Это можно реализовать с помощью маршрута, в котором на верхнем уровне не указан компонент.

В следующем примере 'MainChild' и 'AuxChild' — соседние компоненты. При переходе по адресу 'parent/10/(a//aux:b)' маршрут создаёт рядом компоненты main child и aux child. Для этого в компоненте приложения должны быть определены основной и дополнительный outlet.

[{
   path: 'parent/:id',
   children: [
     { path: 'a', component: MainChild },
     { path: 'b', component: AuxChild, outlet: 'aux' }
   ]
}]

Маршрутизатор объединяет параметры, данные и результаты разрешения данных родительского маршрута без компонента с параметрами, данными и результатами разрешения данных дочерних маршрутов.

Это особенно полезно, если дочерние компоненты определены с пустой строкой пути, как в следующем примере. При такой конфигурации переход по адресу '/parent/10' создаёт компоненты main child и aux.

[{
   path: 'parent/:id',
   children: [
     { path: '', component: MainChild },
     { path: '', component: AuxChild, outlet: 'aux' }
   ]
}]

Отложенная загрузка

Отложенная загрузка ускоряет загрузку приложения, разбивая его на несколько пакетов и загружая их по мере необходимости. Чтобы использовать отложенную загрузку, укажите свойство loadChildren в объекте Route вместо свойства children.

Для следующего примера маршрута маршрутизатор будет загружать связанный модуль по мере необходимости с помощью встроенной в браузер системы импорта.

[{
  path: 'lazy',
  loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),
}];