Параметры маршрутов

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

Структура маршрута

Маршрут в Polymer состоит из трёх ключевых частей:

  1. route — объект маршрута, получаемый от app-location. Содержит информацию о текущем пути, параметрах и подмаршрутах.
  2. pattern — шаблон, которому должен соответствовать путь. Пример: /users/:userId.
  3. data — объект, куда автоматически записываются значения параметров маршрута.

Пример использования базового маршрута с параметром:

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

<p>Текущий пользователь: [[routeData.userId]]</p>

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

  • route связывается с app-location, который отслеживает текущий URL.
  • pattern определяет шаблон маршрута с параметром :userId.
  • routeData автоматически получает значение параметра из URL. Если путь /users/42, то routeData.userId будет равен "42".

Подмаршруты и вложенные маршруты

Для более сложной структуры приложения поддерживаются вложенные маршруты. Используется атрибут tail, который передаёт оставшуюся часть URL следующему app-route.

Пример:

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

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

<p>Параметры пользователя: [[routeData.userId]]</p>
<p>Настройки: [[settingsData]]</p>

Если URL равен /users/42/settings, первый app-route выделяет userId = 42, а второй обрабатывает подмаршрут settings.

Дефолтные значения параметров

Для обработки ситуаций, когда параметры могут отсутствовать, применяется привязка с проверкой и дефолтным значением:

<p>Текущий пользователь: [[routeData.userId || 'не указан']]</p>

Таким образом, даже если параметр не передан в URL, приложение корректно отображает состояние.

Изменение маршрута программно

Polymer позволяет изменять параметры маршрута без перезагрузки страницы через объект route:

this.set('route.path', `/users/${newUserId}`);

После этого app-route автоматически обновит routeData, и интерфейс отобразит новые данные.

Фильтрация и привязка параметров

При необходимости фильтровать или трансформировать параметры используется computed properties:

<p>Пользователь: [[_formatUserId(routeData.userId)]]</p>

...

_formatUserId(userId) {
    return userId ? `ID: ${userId}` : 'не указан';
}

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

События при изменении маршрута

app-route генерирует событие route-changed при любом изменении маршрута. Его можно использовать для выполнения дополнительных действий:

<app-route
    route="{{route}}"
    pattern="/users/:userId"
    data="{{routeData}}"
    on-route-changed="_onRouteChanged">
</app-route>

...

_onRouteChanged(e) {
    console.log('Маршрут изменён', this.routeData.userId);
}

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

Динамические сегменты и опциональные параметры

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

<app-route
    route="{{route}}"
    pattern="/products/:productId(/:tab)?"
    data="{{routeData}}">
</app-route>

В таком шаблоне productId обязателен, а tab может отсутствовать. Это позволяет строить гибкие интерфейсы с множеством представлений на одном маршруте.

Итоговая структура

Использование параметров маршрутов в Polymer сводится к трём шагам:

  1. Связывание app-location с route.
  2. Определение шаблонов маршрутов через app-route с параметрами.
  3. Использование routeData для доступа к параметрам и обновления интерфейса.

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

Оглавление