Программная навигация через router.push

В Vue Router для управления навигацией между страницами используется объект маршрутизатора (router). Одним из основных методов программной навигации является router.push, который позволяет инициировать переход на другой маршрут динамически из кода компонента.

Синтаксис метода router.push

Метод router.push поддерживает два основных варианта вызова:

  1. Строковый путь
this.$router.push('/home');

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

  1. Объект конфигурации
this.$router.push({ name: 'profile', params: { userId: 123 } });

Объект может содержать следующие ключи:

  • name — имя маршрута, определённое в конфигурации маршрутов;
  • path — путь маршрута, например '/home';
  • params — параметры маршрута (доступны через route.params);
  • query — параметры строки запроса (доступны через route.query).

Различия между path и name

Использование name предпочтительнее, если маршрут содержит динамические параметры. Пример:

this.$router.push({ name: 'user', params: { id: 42 } });

При попытке использовать path с динамическим параметром напрямую, необходимо самостоятельно формировать строку пути:

this.$router.push(`/user/42`);

Использование name обеспечивает более безопасную и читаемую навигацию.

Асинхронность метода router.push

Метод router.push возвращает Promise, что позволяет обрабатывать успешный переход или ошибки, возникающие при навигации:

this.$router.push('/dashboard')
  .then(() => {
    console.log('Навигация успешно выполнена');
  })
  .catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.error(err);
    }
  });
  • Ошибка NavigationDuplicated возникает при попытке перехода на текущий маршрут. Для её игнорирования достаточно проверить тип ошибки.

Параметры маршрута (params) и строка запроса (query)

  • params используются для динамических сегментов пути:
// Маршрут: /user/:id
this.$router.push({ name: 'user', params: { id: 10 } });
  • query используется для передачи параметров через строку запроса:
this.$router.push({ path: '/search', query: { q: 'vue', page: 2 } });
// Результирующий URL: /search?q=vue&page=2

Важно помнить, что при использовании params с указанием path необходимо соблюдать формат маршрута, иначе параметры не будут подставлены автоматически.

Навигация с программной проверкой условий

Программная навигация позволяет реализовать логику перед переходом:

if (this.isLoggedIn) {
  this.$router.push({ name: 'dashboard' });
} else {
  this.$router.push({ name: 'login' });
}

Такой подход обеспечивает контроль доступа к страницам и динамическую маршрутизацию в зависимости от состояния приложения.

Использование в Composition API

В Vue 3 с Composition API объект router можно получить через хук useRouter:

import { useRouter } from 'vue-router';

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

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

    return { goToProfile };
  }
};

Это позволяет удобно управлять навигацией внутри функций компонента без обращения к this.

Особенности поведения при повторной навигации

Попытка перейти на текущий маршрут с теми же параметрами вызовет NavigationDuplicated. Для безопасного использования рекомендуется обрабатывать ошибки:

router.push({ name: 'home' }).catch(err => {
  if (err.name !== 'NavigationDuplicated') throw err;
});

Взаимодействие с beforeRouteLeave и beforeEach

Метод router.push триггерит все навигационные гварды:

  • beforeRouteLeave текущего компонента;
  • глобальные гварды router.beforeEach;
  • beforeEnter маршрута назначения.

Это позволяет выполнять проверки, отменять или перенаправлять переход на другой маршрут:

this.$router.push({ name: 'settings' });

Если глобальная гварда вернёт false, переход будет отменён.

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

  • Для динамических маршрутов лучше использовать name + params.
  • Для передачи необязательных данных — использовать query.
  • Всегда обрабатывать возможные ошибки Promise при программной навигации.
  • В Composition API предпочтительно использовать useRouter вместо this.$router.

Метод router.push является ключевым инструментом программной навигации, обеспечивая гибкий контроль маршрутов и интеграцию с логикой компонентов.

Оглавление