URL и параметры

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

Управление URL

Unpoly предоставляет несколько способов манипулировать URL страницы без её перезагрузки. Всё начинается с метода up.route(), который позволяет изменять URL, передавая нужные параметры.

up.route('/new-page');

Этот код изменяет URL на /new-page, но не вызывает перезагрузку страницы. Это полезно, когда необходимо обновить адресную строку при изменении контента, но без полной загрузки страницы.

Использование параметров в URL

Параметры в URL играют важную роль в динамических веб-приложениях, так как позволяют передавать данные между страницами. В Unpoly это реализуется с помощью методов для работы с запросами и их параметрами.

Для получения параметров из текущего URL используется метод up.url(), который возвращает объект с параметрами.

const params = up.url().params;
console.log(params);  // { id: '123', filter: 'active' }

Метод up.url() позволяет не только извлекать параметры, но и изменять их. Например, можно динамически обновлять параметры запроса:

up.url({ id: '456' });

Этот код изменит параметр id в текущем URL, оставив остальные параметры без изменений.

Навигация с параметрами

Для навигации с передачей параметров URL Unpoly также предоставляет удобные инструменты. Когда необходимо перейти на другую страницу с сохранением текущих параметров или с добавлением новых, используется метод up.replace().

up.replace('/products', { category: 'electronics' });

Метод replace() заменяет текущий URL, не добавляя запись в историю браузера. Это полезно в случае, когда изменение URL не должно оставлять следов в истории, например, при фильтрации или поиске.

Если требуется добавить новую запись в историю браузера (для поддержки кнопки “Назад”), используется метод up.push().

up.push('/search', { query: 'laptop', page: 2 });

Обработка параметров в запросах

При получении запросов с параметрами важно корректно обработать их на сервере. Unpoly поддерживает интеграцию с серверной частью, позволяя работать с параметрами URL. Например, сервер может отправить изменённые данные, которые должны быть отображены на клиенте, и эти данные можно захватить в параметрах.

up.on('up:load', function(event) {
  const params = event.url.params;
  console.log(params);  // { query: 'laptop', page: 2 }
});

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

Уведомления и синхронизация URL

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

up.on('up:fragment:change', function(event) {
  const url = event.url;
  up.replace(url);  // Обновить URL без перезагрузки
});

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

Работа с историей браузера

Одной из сильных сторон Unpoly является поддержка истории браузера. Методы push() и replace() обеспечивают удобное добавление записей в историю и замену текущей записи, что важно для создания удобной навигации в приложении. Unpoly автоматически управляет историей, синхронизируя её с текущими действиями на странице.

При переходе на новый URL с параметрами библиотека сохраняет состояние, что позволяет пользователю использовать стандартные кнопки браузера “Назад” и “Вперёд” без потери контекста.

up.push('/profile', { tab: 'settings' });

Этот вызов добавит новую запись в историю, и при возвращении на эту страницу пользователь окажется на нужной вкладке.

Усложнённые URL и маршруты

Unpoly поддерживает более сложные маршруты и параметры, включая хэш-сегменты и множественные уровни вложенности. Например, можно использовать следующий синтаксис:

up.route('/category/:categoryId/product/:productId', {
  categoryId: 1,
  productId: 42
});

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

Заключение

Работа с URL и параметрами в Unpoly позволяет динамично управлять состоянием веб-приложения, не перегружая страницы. Методы работы с URL, такие как up.route(), up.replace(), и up.push(), дают гибкость в навигации и синхронизации с серверной логикой. Интеграция с историей браузера и возможность обработки параметров делают работу с Unpoly мощным инструментом для создания динамичных интерфейсов.

Оглавление