Хук useRoute

В библиотеке Vue Router хук useRoute предоставляет доступ к текущему маршруту приложения. Это мощный инструмент для получения информации о состоянии маршрута без необходимости передавать props или использовать события.

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

import { useRoute } from 'vue-router';

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

    console.log(route.path);   // Текущий путь
    console.log(route.params); // Параметры маршрута
    console.log(route.query);  // Параметры строки запроса
  }
}

useRoute возвращает реактивный объект, который автоматически обновляется при смене маршрута. Это ключевое отличие от старых методов, таких как $route, используемых в Options API: изменения маршрута отслеживаются реактивно.

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

  • path — полный путь текущего маршрута.
  • name — имя маршрута, если оно задано в конфигурации.
  • params — объект с параметрами маршрута (например, динамическими сегментами).
  • query — объект с параметрами строки запроса.
  • fullPath — полный путь с учётом query и hash.
  • hash — фрагмент URL после символа #.
  • matched — массив записей маршрутов, которые совпадают с текущим маршрутом.
  • redirectedFrom — исходный маршрут, если произошёл редирект.

Реактивность и отслеживание изменений

Хук useRoute возвращает реактивный объект, поэтому можно использовать его свойства в вычисляемых функциях и watch для динамических реакций на изменение маршрута.

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

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

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

    watch(() => route.path, (newPath) => {
      console.log(`Маршрут изменился на: ${newPath}`);
    });

    return { userId };
  }
}

В примере userId автоматически обновляется при смене параметра id в URL, а watch позволяет реагировать на изменение пути.

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

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

const routes = [
  { path: '/user/:id', component: UserProfile }
];

useRoute позволяет получить доступ к id:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id;

    return { userId };
  }
}

Поскольку params реактивны, изменение маршрута автоматически обновит userId.

Работа с query-параметрами

Query-параметры доступны через свойство query:

// URL: /search?query=vue
const route = useRoute();
console.log(route.query.query); // 'vue'

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

Совместное использование с useRouter

Хук useRoute часто применяется вместе с useRouter, который предоставляет методы для навигации:

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

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

    function goToUser(userId) {
      router.push({ name: 'user', params: { id: userId } });
    }

    return { route, goToUser };
  }
}

Это позволяет одновременно получать информацию о текущем маршруте и управлять переходами между ними.

Ограничения и особенности

  • useRoute работает только внутри функции setup или функциональных компонентов.
  • Объект маршрута не должен мутироваться вручную, все изменения должны происходить через методы router.push, router.replace или аналогичные.
  • При SSR (Server-Side Rendering) объект маршрута доступен сразу, но следует учитывать реактивность и возможные различия между сервером и клиентом.

Частые сценарии использования

  1. Отображение активного маршрута Используется для подсветки активного пункта меню:

    const isActive = computed(() => route.path === '/home');

  2. Динамическая подгрузка данных На основе параметров маршрута можно загружать соответствующие данные:

    watch(() => route.params.id, async (id) => {
  data.value = await fetchUserData(id);
});

  3. Реактивные фильтры и пагинация Параметры query позволяют реализовать фильтры и пагинацию без перезагрузки страницы:

    watch(() => route.query.page, loadPage);

useRoute является фундаментальным инструментом при построении современных Vue-приложений с Vue Router, обеспечивая реактивный доступ к маршрутам, их параметрам и query, что упрощает навигацию и динамическое отображение данных.

Оглавление