Вложенные маршруты

Встроенная маршрутизация в приложениях на Polymer реализуется через компонент <app-route>, который позволяет организовать как простые, так и сложные маршруты с поддержкой вложенной навигации. Вложенные маршруты позволяют создавать иерархию страниц, где одна основная страница может содержать несколько подстраниц с собственными состояниями и URL.

Основы маршрутизации

Для работы маршрутов используется несколько ключевых компонентов:

  • <app-location> — отслеживает текущее состояние URL и синхронизирует его с приложением.
  • <app-route> — сопоставляет URL с параметрами маршрута и обеспечивает управление вложенной маршрутизацией.
  • route-path и route-tail — свойства <app-route>, которые позволяют отделять часть URL для текущего компонента и оставшуюся часть для вложенных маршрутов.

Пример базовой конфигурации:

<app-location route="{{route}}"></app-location>
<app-route
  route="{{route}}"
  pattern="/:section"
  data="{{routeData}}"
  tail="{{subroute}}">
</app-route>

Здесь routeData.section будет содержать текущий сегмент URL, а subroute можно передавать в дочерние компоненты для организации вложенной навигации.

Организация вложенных маршрутов

Вложенные маршруты создаются путем добавления дополнительных <app-route> внутри дочернего компонента. Основной принцип — верхний уровень маршрута передает остаток URL через свойство tail дочернему <app-route>.

Пример структуры:

<my-main-view route="{{route}}"></my-main-view>

В компоненте my-main-view:

<app-route
  route="{{subroute}}"
  pattern="/:subsection"
  data="{{subrouteData}}"
  tail="{{subsubroute}}">
</app-route>

<iron-pages selected="[[subrouteData.subsection]]" attr-for-selected="name">
  <my-sub-view name="details" route="[[subsubroute]]"></my-sub-view>
  <my-sub-view name="settings" route="[[subsubroute]]"></my-sub-view>
</iron-pages>
  • subrouteData.subsection — текущий сегмент вложенного маршрута.
  • subsubroute — оставшийся путь, который может быть передан дальше для ещё более глубоких вложений.

Это позволяет строить многоуровневую маршрутизацию, где каждый компонент отвечает за свою часть URL.

Передача параметров

Вложенные маршруты легко поддерживают передачу динамических параметров. Используется синтаксис /:paramName в pattern. Например:

<app-route
  route="{{subroute}}"
  pattern="/user/:userId"
  data="{{userData}}"
  tail="{{userTail}}">
</app-route>

В этом случае userData.userId будет содержать идентификатор пользователя, переданный в URL, а userTail — оставшийся путь для вложенных подстраниц пользователя.

Динамическая подгрузка компонентов

Часто вложенные маршруты используют динамическую подгрузку контента для оптимизации производительности. В Polymer это реализуется через <iron-pages> и ленивую загрузку компонентов с import:

<iron-pages selected="[[subrouteData.subsection]]" attr-for-selected="name">
  <lazy-import name="details" import-path="./user-details.js"></lazy-import>
  <lazy-import name="settings" import-path="./user-settings.js"></lazy-import>
</iron-pages>

Таким образом, компонент загружается только при активации соответствующего маршрута.

Управление историей и навигацией

Вложенные маршруты интегрируются с window.history через <app-location>. Для программной навигации можно использовать метод set для обновления route:

this.set('route.path', '/dashboard/user/42/details');

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

Резюме по вложенным маршрутам

  • Каждый <app-route> обрабатывает свой сегмент URL и передает остаток пути через tail.
  • data используется для передачи параметров маршрута в компонент.
  • <iron-pages> обеспечивает динамическую смену подкомпонентов в зависимости от маршрута.
  • Вложенные маршруты позволяют строить многоуровневую навигацию с динамической подгрузкой и синхронизацией URL.

Эта архитектура делает приложения на Polymer гибкими и масштабируемыми, поддерживая сложные структуры страниц и глубокую маршрутизацию без дублирования кода.

Оглавление