Query-параметры

Slim.js предоставляет компактный и эффективный способ управления состоянием компонентов и маршрутизацией, включая работу с query-параметрами URL. Query-параметры позволяют передавать данные в адресной строке без изменения маршрута, что делает их удобным инструментом для фильтров, пагинации и динамического контента.

Получение query-параметров

Для доступа к query-параметрам используется объект Slim.Route.query. Этот объект автоматически синхронизируется с текущим URL и обновляется при изменении адресной строки.

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

class ProductList extends Slim {
  constructor() {
    super();
    this.filter = '';
  }

  onBeforeMount() {
    // Получение параметра filter из URL
    this.filter = Slim.Route.query.filter || '';
  }

  render() {
    return `
      <div>
        <input type="text" value="${this.filter}" placeholder="Фильтр" />
      </div>
    `;
  }
}

customElements.define('product-list', ProductList);

Ключевые моменты:

Slim.Route.query возвращает объект с ключами, соответствующими именам параметров в URL.
Если параметр отсутствует, возвращается undefined.
Доступ к параметрам возможен на этапе жизненного цикла onBeforeMount, что гарантирует корректную инициализацию данных перед рендером.

Установка и изменение query-параметров

Изменение query-параметров выполняется через метод Slim.Route.setQuery(). Этот метод позволяет программно изменять параметры, не перезагружая страницу.

Slim.Route.setQuery({ filter: 'laptop', page: 2 });

После вызова:

URL обновляется с добавлением ?filter=laptop&page=2.
Значения параметров автоматически доступны через Slim.Route.query.
Компоненты, которые используют эти параметры, могут реагировать на изменения.

Если нужно удалить параметр, его можно установить в null:

Slim.Route.setQuery({ filter: null });

Это удаляет filter из строки запроса, сохраняя остальные параметры.

Реактивность query-параметров

Slim.js поддерживает реактивное отслеживание изменений query-параметров. Для этого можно использовать событие queryChange на объекте Slim.Route:

Slim.Route.addEventListener('queryChange', (event) => {
  console.log('Query изменился:', Slim.Route.query);
});

Особенности:

Событие срабатывает при любом изменении query-параметров.
Позволяет обновлять состояние компонентов без полной перезагрузки.
Можно фильтровать изменения по ключам параметров, если необходимо реагировать только на конкретные поля.

Пример динамической фильтрации

Использование query-параметров для фильтрации списка товаров:

class ProductFilter extends Slim {
  constructor() {
    super();
    this.category = Slim.Route.query.category || '';
  }

  onInputChange(event) {
    const value = event.target.value;
    Slim.Route.setQuery({ category: value || null });
    this.category = value;
  }

  render() {
    return `
      <input type="text" value="${this.category}" 
             placeholder="Категория" 
             onin put="this.parentElement.onInputChange(event)" />
      <product-list category="${this.category}"></product-list>
    `;
  }
}

customElements.define('product-filter', ProductFilter);

Поле ввода синхронизировано с query-параметром category.
Любое изменение обновляет URL и состояние дочернего компонента product-list.
Поддерживается реактивная фильтрация без перезагрузки страницы.

Работа с несколькими параметрами и кодирование URL

Slim.js автоматически кодирует значения параметров для корректного использования в URL. Можно устанавливать несколько параметров одновременно:

Slim.Route.setQuery({ search: 'phone', sort: 'price', page: 3 });

URL будет: ?search=phone&sort=price&page=3.
При получении параметров все значения автоматически декодируются.
Поддерживаются числовые и строковые значения, для объектов требуется сериализация в JSON.

Синхронизация с историей браузера

Методы Slim.Route используют API history.pushState и history.replaceState, что позволяет:

Изменять query-параметры без перезагрузки.
Создавать корректную историю навигации: кнопка «Назад» работает стандартным образом.
Поддерживать SEO и возможность копирования URL с актуальными параметрами.