Декларативная маршрутизация

Декларативная маршрутизация в Polymer основана на принципах веб-компонентов и позволяет управлять состоянием приложения через URL без необходимости вручную отслеживать изменения состояния. Основным инструментом для реализации маршрутизации является элемент <app-location> и связанный с ним <app-route> из набора компонентов App Toolbox.

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

  1. <app-location> Этот компонент связывает состояние URL с объектом route. Он наблюдает изменения в адресной строке и обновляет соответствующие свойства в компоненте.

    Пример использования:

    <app-location route="{{route}}"></app-location>

    Здесь route — это объект, который содержит ключевые поля:

    • path — текущий путь URL.
    • __queryParams — объект с параметрами запроса.
    • __queryParamsChanged — флаг, сигнализирующий об изменении параметров запроса.

  2. <app-route> Этот компонент позволяет разделять путь на сегменты и связывать их с состоянием конкретного компонента. Он используется для декомпозиции URL и передачи параметров дочерним компонентам.

    Пример:

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

    Ключевые свойства:

    • pattern — шаблон пути, поддерживающий динамические сегменты (например, :id).
    • data — объект, содержащий значения динамических сегментов.
    • tail — оставшаяся часть пути для вложенной маршрутизации.

Реактивное управление маршрутами

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

static get properties() {
  return {
    routeData: Object
  };
}

static get observers() {
  return [
    '_routeChanged(routeData.id)'
  ];
}

_routeChanged(id) {
  if (id) {
    this._loadUser(id);
  }
}

_loadUser(id) {
  fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(data => this.user = data);
}

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

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

<app-route
    route="{{subroute}}"
    pattern="/settings/:section"
    data="{{settingsData}}">
</app-route>

Таким образом, родительский компонент обрабатывает основной путь (/user/123), а дочерний может управлять подстраницами (/user/123/settings/profile).

Декларативная навигация

Перемещение между маршрутами можно выполнять декларативно с помощью свойства route.path:

this.set('route.path', '/user/456');

Это автоматически обновит URL и инициирует реакцию всех связанных <app-route> компонентов.

Работа с параметрами запроса

<app-location> позволяет работать с query-параметрами через объект route.__queryParams:

this.set('route.__queryParams.filter', 'active');
console.log(this.route.__queryParams.filter); // active

Изменение параметра запроса также вызывает обновление связанных компонентов, что позволяет реализовать фильтрацию и поиск без перезагрузки страницы.

Использование в SPA

В контексте одностраничного приложения Polymer маршрутизация позволяет:

  • Декларативно отображать страницы на основе URL.
  • Управлять состоянием компонентов через привязку данных.
  • Разделять маршруты на сегменты и передавать их дочерним компонентам.
  • Реализовать вложенные маршруты и гибкую навигацию без ручного отслеживания истории браузера.

Полезные советы

  • Для динамических сегментов всегда использовать объект data для хранения значений. Это упрощает реактивное обновление компонентов.
  • При вложенной маршрутизации важно правильно связывать tail родительского маршрута с дочерним.
  • Использование двухсторонней привязки через {{}} позволяет автоматизировать синхронизацию состояния URL и компонента без дополнительных обработчиков событий.
  • Комбинирование маршрутизации с параметрами запроса делает приложение более гибким, позволяя реализовать фильтры, сортировки и переходы между состояниями интерфейса.

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

Оглавление