Работа с новым Composition API

При использовании Composition API для работы с маршрутизатором Vue Router главным инструментом становятся специальные хуки, предоставляемые библиотекой. Наиболее важные из них — useRouter и useRoute.

  • useRouter возвращает объект маршрутизатора, который позволяет программно менять маршрут, добавлять навигационные действия и получать доступ к глобальным методам маршрутизатора.
  • useRoute предоставляет реактивный объект текущего маршрута, содержащий параметры, query-параметры, имя маршрута и путь.

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

import { defineComponent } from 'vue';
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();

    const navigateToProfile = () => {
      router.push({ name: 'Profile', params: { userId: 123 } });
    };

    return {
      route,
      navigateToProfile
    };
  }
});

В этом примере route автоматически реагирует на изменения текущего маршрута, что позволяет отслеживать динамические параметры без использования жизненных циклов компонентов Options API.

Работа с параметрами маршрута

Параметры маршрута доступны через объект route.params. Они являются реактивными, поэтому изменения маршрута автоматически отражаются в компоненте.

Пример:

import { computed } from 'vue';
import { useRoute } from 'vue-router';

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

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

    return { userId };
  }
};

Особенности работы с query-параметрами:

Query-параметры можно получать через route.query, который также реактивен. Это позволяет создавать динамические фильтры, сортировку и поисковые запросы без перезагрузки страницы.

const searchQuery = computed(() => route.query.search || '');

Программная навигация

useRouter предоставляет методы для программной навигации:

  • router.push(location) — добавляет новый маршрут в историю.
  • router.replace(location) — заменяет текущий маршрут.
  • router.go(n) — перемещается на n шагов в истории браузера.

Метод location может принимать строку или объект с ключами: name, path, params, query.

router.push({ name: 'Dashboard', query: { filter: 'active' } });

Навигационные охранники в Composition API

Vue Router позволяет использовать глобальные, локальные и компонентные охранники. В Composition API часто применяются компонентные охранники через функции жизненного цикла onBeforeRouteEnter, onBeforeRouteUpdate и onBeforeRouteLeave.

import { onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      console.log(`Переход с ${from.fullPath} на ${to.fullPath}`);
    });
  }
};
  • onBeforeRouteEnter вызывается перед входом в маршрут, но без доступа к this. Доступ к компоненту можно получить через callback.
  • onBeforeRouteUpdate срабатывает при изменении текущего маршрута, если компонент повторно используется.
  • onBeforeRouteLeave позволяет прервать навигацию, например, при наличии несохранённых данных.

Динамические маршруты и lazy-loading компонентов

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

const routes = [
  {
    path: '/users/:id',
    name: 'UserProfile',
    component: () => import('./components/UserProfile.vue')
  }
];

Использование import() обеспечивает ленивую загрузку компонентов, что сокращает первоначальный размер бандла и ускоряет загрузку приложения.

Роуты с вложенными компонентами

В Composition API вложенные маршруты организуются через свойство children в конфигурации маршрута:

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      { path: '', component: Overview },
      { path: 'stats', component: Stats },
      { path: 'settings', component: Settings }
    ]
  }
];

Компонент рендерит активный дочерний маршрут. Для вложенных можно использовать атрибут name для множественных представлений.

Реактивные наблюдатели маршрута

С помощью Composition API удобно создавать реактивные наблюдатели для параметров маршрута и query:

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}`);
      }
    );
  }
};

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

Привязка навигации к событиям

Интеграция с Composition API упрощает навигацию по событиям интерфейса. Например, для кнопки:

setup() {
  const router = useRouter();
  const goHome = () => router.push({ name: 'Home' });

  return { goHome };
}

Такой подход полностью исключает зависимость от Options API и сохраняет реактивность Vue.

Оглавление