Метод router.go

Метод router.go представляет собой низкоуровневый способ навигации в истории браузера, предоставляемый Vue Router. Он напрямую работает с объектом history и позволяет перемещаться по истории вперед или назад на указанное количество шагов. В отличие от методов push и replace, которые принимают конкретный путь или имя маршрута, router.go ориентирован на позицию в истории браузера.

Синтаксис

router.go(n)

  • n — целое число, определяющее количество шагов в истории.

    • Положительное значение перемещает вперед.
    • Отрицательное значение перемещает назад.
    • 0 обновляет текущий маршрут без изменения позиции в истории.

Примеры использования

  1. Возврат на один шаг назад
this.$router.go(-1);

Этот вызов аналогичен использованию window.history.back(). Vue Router выполнит навигацию к предыдущему маршруту в истории приложения.

  1. Переход вперед на два шага
this.$router.go(2);

В данном случае браузер пытается переместиться вперед на два шага в истории. Если вперед не существует столько шагов, навигация не произойдет.

  1. Обновление текущей страницы
this.$router.go(0);

Этот вариант полезен для перезагрузки текущего компонента маршрута без изменения URL. При этом вызываются все навигационные хуки, такие как beforeRouteUpdate.

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

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

Особенности и рекомендации

  • Использование router.go не генерирует ошибки, если указанный шаг выходит за границы истории браузера — переход просто не выполняется.
  • В отличие от других методов Vue Router, go не возвращает промис, что важно учитывать при цепочках навигации.
  • Метод особенно полезен для интеграции с кнопками “назад” и “вперед” в интерфейсе приложения или для восстановления состояния после модальных окон.

Взаимодействие с навигационными хуками

При вызове router.go происходят все стандартные вызовы навигационных хуков:

  • beforeEach
  • beforeResolve
  • afterEach
  • beforeRouteLeave и beforeRouteUpdate на компонентах, если маршрут изменяется

Таким образом, router.go интегрируется с системой контроля навигации Vue Router так же, как и методы push и replace.

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

methods: {
  goBackOrReload() {
    if (window.history.length > 1) {
      this.$router.go(-1); // возвращаемся на предыдущий маршрут
    } else {
      this.$router.go(0); // перезагружаем текущий маршрут
    }
  }
}

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

Ограничения

  • Метод напрямую зависит от истории браузера и не контролирует маршруты приложения на уровне Vue Router.
  • При использовании серверного рендеринга (SSR) метод не имеет смысла, так как серверная среда не поддерживает историю браузера.

Метод router.go представляет собой удобный инструмент для навигации, ориентированной на историю, позволяя реализовать поведение кнопок “назад” и “вперед”, обновление текущего маршрута и другие сценарии, где важно управлять историей браузера напрямую.

Оглавление