Реактивность объекта route

Объект route является центральным элементом маршрутизации в Vue Router. Он представляет текущее состояние маршрута и доступен во всех компонентах через this.$route в Options API или через useRoute() в Composition API. Одной из ключевых особенностей route является его реактивность, которая позволяет автоматически отслеживать изменения маршрута и реагировать на них в интерфейсе приложения.

Основные свойства объекта route

Объект route содержит несколько важных свойств:

  • path – полный путь текущего маршрута, например /users/42.
  • params – объект параметров маршрута, например { id: '42' }.
  • query – объект GET-параметров URL, например { sort: 'asc' }.
  • name – имя маршрута, если оно определено в конфигурации маршрутизатора.
  • fullPath – полный путь с параметрами и query.
  • meta – объект метаданных маршрута, который задается при его определении.
  • hash – часть URL после символа #.

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

Отслеживание изменений маршрута

Для отслеживания изменений объекта route применяются следующие подходы:

  1. Использование реактивных вычислений (computed):
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    const userId = computed(() => route.params.id);

    return { userId };
  }
}

При изменении параметра id в URL значение userId автоматически обновляется без дополнительных действий.

  1. Слежение с помощью watch:
import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    watch(
      () => route.params.id,
      (newId, oldId) => {
        console.log(`Параметр id изменился с ${oldId} на ${newId}`);
      }
    );
  }
}

watch позволяет реагировать на любые изменения свойств маршрута, включая params, query или path.

Реактивность при переходах между маршрутами

Каждый раз при переходе на другой маршрут Vue Router обновляет объект route. Это обновление реактивно, поэтому:

  • Компоненты автоматически перерисовываются, если используют свойства маршрута в шаблоне.
  • Можно динамически подгружать данные, основываясь на изменениях маршрута.

Например:

При смене id в URL компонент автоматически обновляет отображаемый идентификатор пользователя.

Важные нюансы реактивности

  1. route сам по себе реактивен, но его свойства не являются отдельными реактивными объектами Vue. Использование computed или watch обеспечивает безопасное слежение за конкретными свойствами.

  2. Не стоит копировать свойства маршрута в обычные переменные, если требуется реактивное обновление. Например:

const route = useRoute();
const id = route.params.id; // НЕ реактивно!

В этом случае id не изменится при переходе на другой маршрут. Необходимо использовать:

const id = computed(() => route.params.id); // реактивно
  1. Реактивность работает только в пределах компонента, использующего useRoute или this.$route. Для глобальной реакции на маршруты применяются глобальные охранники маршрутов (router.beforeEach) или состояния в store.

Реактивные параметры и query

Параметры маршрута (params) и query-параметры (query) являются объектами. Их реактивность позволяет строить динамический интерфейс без ручного обновления:

watch(
  () => route.query,
  (newQuery) => {
    fetchData(newQuery.filter);
  },
  { deep: true } // для отслеживания вложенных свойств query
);

Опция { deep: true } важна для отслеживания изменений внутри вложенных объектов query.

Реактивность в комбинации с динамическими маршрутами

Динамические маршруты (/users/:id) особенно выигрывают от реактивного подхода:

  • Использование watch на route.params.id позволяет подгружать данные для нового пользователя при изменении URL без размонтирования компонента.
  • Использование computed позволяет напрямую отображать актуальные параметры в шаблоне.

Ключевые выводы о реактивности объекта route

  • route автоматически обновляется при навигации.
  • Свойства маршрута (params, query, path) можно использовать в computed и watch.
  • Неправильное копирование свойств убирает реактивность.
  • Для сложных вложенных изменений query рекомендуется использовать глубокий watch.
  • Реактивность обеспечивает упрощенное управление состоянием компонентов, зависимым от маршрута.
Оглавление