Хук useRouter

useRouter — это Composition API-хук в Vue 3, предоставляемый библиотекой Vue Router, который позволяет работать с маршрутизатором внутри компонентов. Он возвращает объект маршрутизатора (router), через который можно управлять навигацией, получать доступ к текущему маршруту и программно изменять состояние маршрутов.

import { useRouter } from 'vue-router';

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

    const goToHome = () => {
      router.push('/');
    };

    return { goToHome };
  }
};

Ключевой момент: useRouter работает только внутри setup() компонента или других Composition API функций. Вне setup доступ к маршрутизатору можно получить через this.$router.

Методы объекта router

Объект, возвращаемый useRouter, содержит множество методов для управления навигацией:

  1. router.push(location) Навигация к указанному маршруту. location может быть строкой с URL или объектом:
router.push({ name: 'profile', params: { id: 123 } });
  1. router.replace(location) Похоже на push, но заменяет текущую запись в истории браузера, не создавая новую.
router.replace('/login');

  1. router.back() и router.forward() Манипуляция историей браузера аналогично методам window.history.

  2. router.go(n) Переход на n шагов вперед или назад в истории:

router.go(-1); // Назад на один шаг
  1. router.resolve(location) Возвращает объект маршрута, на который ссылается location. Полезно для генерации ссылок без фактической навигации.
const resolved = router.resolve({ name: 'profile', params: { id: 123 } });
console.log(resolved.href); // /profile/123

Навигация с параметрами и query

Vue Router позволяет передавать параметры и query при переходе:

router.push({
  name: 'user',
  params: { id: 42 },
  query: { ref: 'dashboard' }
});
  • params — используются для динамических сегментов маршрута (/user/:id)
  • query — для строки запроса (?ref=dashboard)

Важное ограничение: при использовании params нужно использовать именованные маршруты. Строковый путь с params работать не будет.

Программная навигация с условиями

Часто требуется навигация только при определённых условиях:

const router = useRouter();

function goToProfile(user) {
  if (!user.loggedIn) {
    router.push('/login');
  } else {
    router.push({ name: 'profile', params: { id: user.id } });
  }
}

В комбинации с реактивными объектами из ref или reactive можно создавать динамическую навигацию в зависимости от состояния приложения.

Использование с Composition API и реактивностью

useRouter идеально интегрируется с реактивной логикой Vue 3:

import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const selectedId = ref(null);

    watch(selectedId, (newId) => {
      if (newId !== null) {
        router.push({ name: 'item', params: { id: newId } });
      }
    });

    return { selectedId };
  }
};

При изменении selectedId произойдёт автоматическая навигация. Это позволяет синхронизировать состояние компонентов с маршрутизатором.

Работа с навигационными guards через router

useRouter предоставляет доступ к методам для добавления глобальных и локальных навигационных охранников:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});
  • beforeEach — вызывается перед каждой навигацией
  • afterEach — выполняется после завершения навигации
  • beforeResolve — выполняется перед окончательной резолюцией маршрута

Комбинируя useRouter с реактивными данными, можно гибко управлять доступом к страницам и создавать защиту маршрутов на уровне компонентов.

Получение текущего маршрута через router.currentRoute

Хотя useRoute обычно используется для получения текущего маршрута, объект router также позволяет получить доступ через router.currentRoute:

const router = useRouter();
console.log(router.currentRoute.value.fullPath);
  • router.currentRoute — это реактивный объект типа Ref, поэтому его свойства можно отслеживать через watch и автоматически реагировать на изменения маршрута.

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

  • Использовать router.push для обычной навигации и router.replace для случаев, когда нужно избежать добавления записи в историю.
  • Всегда использовать именованные маршруты при передаче params, чтобы избежать ошибок.
  • Для реактивного отслеживания текущего маршрута сочетать useRouter с useRoute.
  • Использовать глобальные guards для проверки авторизации и защиты маршрутов.
  • Избегать вызова useRouter вне setup(), Composition API функций или хуков, так как это приведёт к ошибке.

useRouter является мощным инструментом для программного управления навигацией и интеграции маршрутизатора в реактивные компоненты Vue 3. Грамотное использование методов и реактивных связок позволяет создавать сложные и гибкие сценарии навигации в приложении.

Оглавление