Эмуляция навигации

Vue Router предоставляет мощный механизм для управления навигацией внутри приложения на Vue.js. Помимо декларативного способа навигации с использованием компонента <router-link>, библиотека поддерживает программную навигацию, позволяющую изменять маршрут через код. Это особенно важно для обработки событий, таких как формы, кнопки или результаты асинхронных операций.

Программная навигация осуществляется с помощью объекта router, доступного в компонентах через this.$router или в Composition API через useRouter().

Методы программной навигации

  1. push() – добавляет новый маршрут в историю навигации. Используется для перехода к новой странице, сохраняя возможность вернуться назад.
this.$router.push('/about'); // переход на страницу /about

Можно передавать объект с более подробной информацией:

this.$router.push({ name: 'user', params: { id: 123 } });
this.$router.push({ path: '/user/123', query: { ref: 'dashboard' } });
  1. replace() – заменяет текущий маршрут в истории, что предотвращает создание новой записи истории браузера. Полезно для редиректов или навигации после авторизации.
this.$router.replace('/login');
  1. go() – позволяет перемещаться по истории браузера на указанное количество шагов. Положительное значение двигает вперед, отрицательное — назад.
this.$router.go(-1); // возвращение на предыдущую страницу
  1. back() и forward() – удобные сокращения для перемещения на один шаг назад или вперед.
this.$router.back();
this.$router.forward();

Эмуляция навигации в компонентах

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

async submitForm() {
  const response = await api.submitData(this.form);
  if (response.success) {
    this.$router.push({ name: 'success', query: { id: response.id } });
  }
}

Использование объекта маршрута route позволяет учитывать текущий контекст при эмуляции переходов:

if (this.$route.query.redirect) {
  this.$router.push(this.$route.query.redirect);
} else {
  this.$router.push('/');
}

Навигация с использованием Composition API

В Composition API навигация осуществляется через функцию useRouter() для маршрутизатора и useRoute() для текущего маршрута:

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

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

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

    return { goToProfile };
  }
};

Это позволяет изолировать логику навигации и легко интегрировать её в функции и реактивные вычисления.

Обработка ошибок и навигационные перехватчики

Методы push() и replace() возвращают Promise, что открывает возможность обработать ошибки, возникающие при навигации, например, когда пытаются перейти на текущий маршрут.

this.$router.push('/dashboard')
  .then(() => console.log('Навигация успешна'))
  .catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.error(err);
    }
  });

Навигационные перехватчики позволяют контролировать переходы глобально и на уровне компонентов:

  • beforeEach – выполняется перед каждой навигацией.
  • beforeResolve – выполняется после всех beforeEnter и асинхронных хуков.
  • afterEach – выполняется после завершения навигации.

Пример глобального перехватчика:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

Эмуляция переходов с динамическими параметрами

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

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

Если компонент уже смонтирован на странице, можно использовать слежение за параметрами:

watch(() => route.params.id, (newId) => {
  fetchProduct(newId);
});

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

Query-параметры позволяют передавать дополнительные данные без изменения маршрута:

this.$router.push({ path: '/search', query: { q: 'vue', page: 2 } });

Vue Router автоматически сериализует объект query в строку запроса и сохраняет его в истории браузера.

Эмуляция редиректов и условной навигации

Часто требуется направлять пользователя на разные маршруты в зависимости от состояния приложения. Для этого используют условную навигацию:

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

Использование replace() предотвращает появление лишних записей в истории, что важно при автоматическом редиректе после входа в систему или регистрации.

Эта структура программной навигации позволяет управлять переходами гибко, создавать сложные сценарии маршрутизации, эмулировать поведение пользователя и управлять историей браузера, обеспечивая полный контроль над навигацией внутри приложения Vue.

Оглавление