Query параметры

Query-параметры в Vue Router позволяют передавать данные через URL без изменения структуры маршрута. Они представляют собой строку после знака ? и имеют формат ключ=значение. Например, в маршруте /products?category=books&page=2 query-параметры — category=books и page=2.

Доступ к query-параметрам

В компонентах, которые подключены к маршруту, query-параметры доступны через объект route:

export default {
  computed: {
    category() {
      return this.$route.query.category;
    },
    page() {
      return this.$route.query.page;
    }
  }
}
  • this.$route.query возвращает объект, где ключи — имена параметров, а значения — строки.
  • Все значения query-параметров представлены в виде строк, даже если в URL они выглядят как числа.

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

Query-параметры можно изменять через методы навигации Vue Router: push или replace:

this.$router.push({ path: '/products', query: { category: 'books', page: '3' } });
  • push добавляет новую запись в историю браузера.
  • replace заменяет текущую запись, что удобно для обновления состояния без возможности вернуться назад.

Обновление query-параметров без перезагрузки страницы

Vue Router автоматически реагирует на изменения query-параметров, если используется наблюдение за объектом route:

watch: {
  '$route.query'(newQuery, oldQuery) {
    console.log('Query обновился:', newQuery);
  }
}
  • Это полезно для фильтров, сортировки и пагинации на страницах без повторного монтирования компонентов.

Сохранение query-параметров при навигации

При переходе на новый маршрут можно сохранить существующие query-параметры:

this.$router.push({ name: 'ProductDetails', query: { ...this.$route.query, id: '42' } });
  • Оператор ... позволяет объединять старые параметры с новыми, не теряя текущего состояния URL.

Преобразование типов query-параметров

Поскольку query-параметры всегда строки, для работы с числами или булевыми значениями требуется явное преобразование:

const pageNumber = Number(this.$route.query.page);
const showActive = this.$route.query.active === 'true';
  • Игнорирование преобразования типов может приводить к логическим ошибкам в фильтрации и пагинации.

Использование query-параметров в маршрутах с динамическими сегментами

Query-параметры могут сочетаться с динамическими маршрутами:

this.$router.push({ name: 'User', params: { id: 10 }, query: { tab: 'settings' } });
  • В этом случае URL будет выглядеть как /user/10?tab=settings.
  • params и query не конфликтуют, но важно помнить, что динамические сегменты не появляются в query.

Роутинг и кнопки браузера

Query-параметры интегрируются с историей браузера:

  • push создает новую запись в истории.
  • replace меняет текущую запись.
  • Переключение между query-параметрами через push позволяет использовать кнопки “назад” и “вперед” без потери состояния.

Практический пример: фильтры и сортировка

<template>
  <div>
    <select v-model="category" @change="updateQuery">
      <option value="books">Books</option>
      <option value="electronics">Electronics</option>
    </select>

    <select v-model="sort" @change="updateQuery">
      <option value="asc">Ascending</option>
      <option value="desc">Descending</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      category: this.$route.query.category || 'books',
      sort: this.$route.query.sort || 'asc'
    };
  },
  methods: {
    updateQuery() {
      this.$router.push({ query: { category: this.category, sort: this.sort } });
    }
  },
  watch: {
    '$route.query'(newQuery) {
      this.category = newQuery.category || 'books';
      this.sort = newQuery.sort || 'asc';
    }
  }
}
</script>
  • Изменения в селектах обновляют URL.
  • Обновление URL отражается в состоянии компонента через watch.

Ограничения и рекомендации

  • Query-параметры не подходят для передачи больших объемов данных.
  • Не использовать для хранения конфиденциальной информации.
  • Лучше применять для фильтров, сортировки, пагинации и поиска, где важно отражение состояния в URL.

Хотите, я могу сразу подготовить следующий раздел по Навигационным гвардам (Navigation Guards) в Vue Router, чтобы продолжить учебник логично?

Оглавление