App Route элемент

App Route — это специализированный элемент в Polymer, предназначенный для работы с маршрутизацией в одностраничных приложениях (SPA). Он обеспечивает синхронизацию состояния URL с приложением и позволяет строить сложные маршруты с вложенными компонентами. Основной принцип работы заключается в разбиении URL на сегменты и сопоставлении их с состоянием приложения.

Основные свойства App Route

  • route Объект, содержащий текущий путь. Обычно передаётся от родительского элемента app-location и содержит поля path, __queryParams и __params.

  • pattern Строка-шаблон маршрута, которая определяет структуру URL. Поддерживаются параметры, обозначаемые через :. Пример:

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

  • data Объект, куда будут записаны значения параметров маршрута, указанных в pattern. В примере выше, при переходе на /users/42, routeData.id будет равно "42".

  • tail Используется для вложенных маршрутов. Содержит часть URL, которая остаётся после обработки текущего pattern. Позволяет строить цепочки маршрутов для сложных приложений.

  • active Булево значение, которое указывает, соответствует ли текущий путь указанному pattern. Используется для условного отображения компонентов на основе маршрута.

Связывание с URL

App Route тесно интегрируется с app-location, который отслеживает изменения URL в браузере. Комбинация этих двух элементов позволяет реализовать полноценную маршрутизацию:

<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/dashboard" active="{{dashboardActive}}"></app-route>
<app-route route="{{route}}" pattern="/users/:id" data="{{userData}}"></app-route>

В этом примере:

  • route синхронизируется с адресной строкой.
  • dashboardActive становится true, если URL равен /dashboard.
  • userData.id получает значение параметра id при посещении /users/123.

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

Использование tail позволяет создавать иерархические маршруты, что особенно полезно для модульных приложений с множеством страниц:

<app-route route="{{route}}" pattern="/users/:id" data="{{userData}}" tail="{{subroute}}"></app-route>
<app-route route="{{subroute}}" pattern="/settings" active="{{settingsActive}}"></app-route>

Здесь:

  • Основной маршрут /users/:id обрабатывается первым элементом.

  • Остаток URL (tail) передаётся во вложенный app-route, который проверяет /settings.

  • При переходе на /users/42/settings:

    • userData.id = "42",
    • settingsActive = true.

Реактивность и привязка данных

App Route интегрирован с системой двухсторонней привязки Polymer. Любое изменение URL автоматически обновляет связанные свойства:

  • Пример динамического отображения страницы:
<template is="dom-if" if="[[dashboardActive]]">
  <dashboard-page></dashboard-page>
</template>
<template is="dom-if" if="[[userData.id]]">
  <user-profile user-id="[[userData.id]]"></user-profile>
</template>
  • Любое изменение маршрута немедленно отражается в DOM, что исключает необходимость ручной обработки URL.

Работа с query-параметрами

App Route не парсит query-параметры напрямую, но они доступны через объект route.__queryParams. Например, для URL /users/42?tab=posts:

console.log(route.__queryParams.tab); // "posts"

Это позволяет реализовывать фильтры, вкладки и другие функциональности без дополнительного парсинга строки запроса.

Обработка активных состояний

Свойство active удобно использовать для условного рендеринга компонентов или изменения стилей:

<app-route route="{{route}}" pattern="/home" active="{{homeActive}}"></app-route>

<nav>
  <a class$="[[homeActive ? 'active' : '']]" href="/home">Главная</a>
</nav>

Здесь класс active применяется автоматически при совпадении маршрута с шаблоном.

Практические рекомендации

  • Всегда использовать tail для вложенных маршрутов, чтобы избежать конфликтов между элементами.
  • Шаблоны маршрутов должны быть уникальными и не пересекаться, иначе active может работать некорректно.
  • Для динамических URL рекомендуется хранить параметры в data, а не обрабатывать напрямую строку route.path.
  • Комбинация app-location + app-route обеспечивает чистую архитектуру SPA без необходимости сторонних библиотек.

Интеграция с другими элементами

App Route хорошо сочетается с:

  • dom-if и dom-repeat — для условного отображения и списков страниц.
  • Polymer-свойствами и computed-функциями — для автоматического вычисления состояния компонентов.
  • Custom Events — для уведомления других частей приложения о смене маршрута.

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

Оглавление