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

Для осуществления программной навигации в Vue Router используются методы объекта router, который можно импортировать в нужном компоненте.

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

Помимо использования router-link для создания тегов привязки для декларативной навигации, мы можем сделать это программно, используя методы экземпляра маршрутизатора.

Чтобы перейти к другому URL-адресу, используйте router.push. Этот метод помещает новую запись в стек истории, поэтому, когда пользователь нажимает кнопку возврата браузера, он переходит к предыдущему URL-адресу

Это метод, вызываемый внутренне, когда вы нажимаете router-link, поэтому нажатие router-link :to="..." эквивалентно вызову router.push(...)

Аргументом может быть строковый путь или объект дескриптора местоположения. Примеры:

При указании параметров обязательно укажите строку или число (или их массив для повторяемых параметров). Любой другой тип (например, объекты, логические значения и т.д.) будет автоматически преобразован в строку. Для необязательных параметров вы можете указать пустую строку ("") или null в качестве значения, чтобы удалить ее.

Поскольку prop to принимает объект того же типа, что и router.push, к ним обоим применяются одни и те же правила.

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

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

Также можно напрямую добавить свойство replace: true к аргументу to, который передается в router.push:

Этот метод принимает одно целое число в качестве параметра, который указывает, на сколько шагов нужно перейти вперед или назад в стеке истории, аналогично window.history.go(n)

Возможно, вы заметили, что router.push, router.replace и router.go являются аналогами window.history.pushState, window.history.replaceState и window.history.go, и они действительно имитируют API window.history

Следовательно, если вы уже знакомы с API-интерфейсами истории браузера, манипулирование историей будет привычным при использовании Vue Router

Стоит отметить, что методы навигации Vue Router (push, replace, go) работают последовательно независимо от параметра истории, переданного при создании экземпляра маршрутизатора