Метод router.replace

Метод router.replace используется для программной навигации между маршрутами в приложении на Vue.js, аналогично методу router.push, но с ключевым отличием: он заменяет текущую запись в истории браузера вместо добавления новой. Это значит, что после выполнения router.replace пользователь не сможет вернуться к предыдущему маршруту с помощью кнопки «Назад» браузера.

Синтаксис

router.replace(location, onComplete?, onAbort?)
  • location — объект маршрута или строка с адресом, куда необходимо перейти.
  • onComplete — необязательная функция, вызываемая при успешной навигации.
  • onAbort — необязательная функция, вызываемая при отмене навигации (например, при срабатывании навигационных охранников).

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

this.$router.replace('/dashboard');

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

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

В этом случае навигация произойдет к маршруту с именем user, и параметр id будет передан в URL.

Отличия от router.push

  • router.push создаёт новую запись в истории браузера, позволяя пользователю вернуться на предыдущий маршрут.
  • router.replace не создаёт новую запись, текущий маршрут заменяется новым.

Использование replace особенно актуально для:

  • Перенаправлений после логина или регистрации, когда возврат на страницу входа нежелателен.
  • Автоматических маршрутов при выполнении действий, которые не должны оставлять след в истории (например, фильтры поиска или пагинация).

Использование с навигационными охранниками

Метод router.replace работает с навигационными охранниками Vue Router (beforeEach, beforeEnter, beforeRouteUpdate) точно так же, как push. Если охранник возвращает false или вызывает next(false), навигация отменяется, и текущий маршрут остаётся без изменений.

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

this.$router.replace({ name: 'dashboard' });

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

Работа с асинхронными компонентами

При навигации с router.replace можно использовать асинхронные компоненты и динамический импорт. Vue Router корректно обрабатывает загрузку компонента перед изменением маршрута:

const routes = [
  { path: '/profile', component: () => import('./Profile.vue') }
];

this.$router.replace('/profile');

Если компонент ещё не загружен, Vue Router дождется загрузки перед отображением страницы.

Обработка ошибок

В Vue Router 3 и 4 метод replace возвращает промис, что позволяет использовать async/await и ловить ошибки навигации:

try {
  await this.$router.replace({ name: 'settings' });
} catch (err) {
  if (err.name !== 'NavigationDuplicated') {
    console.error(err);
  }
}

Ошибка NavigationDuplicated возникает, если попытаться заменить текущий маршрут на тот же самый маршрут. Игнорирование этой ошибки предотвращает лишние сообщения в консоли.

Практические сценарии применения

  1. Автоматическая переадресация после авторизации:
login().then(() => {
  this.$router.replace({ name: 'dashboard' });
});
  1. Скрытая смена фильтров или параметров запроса:
this.$router.replace({ query: { page: 2, sort: 'name' } });
  1. Предотвращение возврата на страницу с формой после успешной отправки:
submitForm().then(() => {
  this.$router.replace('/thank-you');
});

В этих случаях router.replace гарантирует, что пользователю не придется случайно вернуться на предыдущую страницу, где форма уже отправлена или данные устарели.

Вывод

Метод router.replace — мощный инструмент для управления историей навигации в приложении Vue.js. Он обеспечивает контроль над пользовательским опытом, предотвращая нежелательные возвраты к предыдущим маршрутам, и идеально подходит для редиректов, обновления параметров URL и скрытых изменений состояния маршрута без засорения истории браузера.

Его синтаксис гибкий: можно использовать как строку URL, так и объект маршрута, поддерживается работа с навигационными охранниками и асинхронными компонентами, а промисовый интерфейс позволяет корректно обрабатывать ошибки навигации.

Оглавление