Программная навигация

Смотрите бесплатные видео-уроки на Vue School

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

Переход к другой странице

Примечание: В приведенных ниже примерах экземпляр маршрутизатора обозначается как router. Внутри компонента вы можете получить доступ к маршрутизатору с помощью свойства $router, например, this.$router.push(...). Если вы используете Composition API, доступ к маршрутизатору можно получить, вызвав useRouter()..

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

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

Декларативно	Программно
<router-link :to="...">	router.push(...)

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

// строковый путь
router.push('/users/eduardo')

// объект с path
router.push({ path: '/users/eduardo' })

// именованный маршрут с параметрами, позволяющими маршрутизатору построить url
router.push({ name: 'user', params: { username: 'eduardo' } })

// с query, в результате чего получается /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// с хэшем, в результате чего получается /about#team
router.push({ path: '/about', hash: '#team' })

Примечание: params игнорируются, если указан path, чего нельзя сказать о query, как показано в примере выше. Вместо этого необходимо указать name маршрута или вручную указать полный path с любым параметром:

const username = 'eduardo'
// мы можем вручную создать url, но при этом нам придется самостоятельно обрабатывать кодировку
router.push(`/user/${username}`) // -> /user/eduardo
// то же самое что и выше
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// по возможности используйте `name` и `params`, чтобы воспользоваться преимуществами автоматического кодирования URL
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` не может использоваться вместе с `path`.
router.push({ path: '/user', params: { username } }) // -> /user

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

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

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

Замена текущего пути

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

Декларативно	Программно
<router-link :to="..." replace>	router.replace(...)

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

router.push({ path: '/home', replace: true })
// эквивалент
router.replace({ path: '/home' })

Переходы по истории путей

Смотрите бесплатные видео-уроки на Vue School

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

Примеры

// переход вперед на одну запись, то же самое, что и router.forward()
router.go(1)

// переход назад на одну запись назад, аналогично router.back()
router.go(-1)

// перейти на 3 записи вперед
router.go(3)

// не работает, если записей не так много
router.go(-100)
router.go(100)

Управление history

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

Поэтому, если вы уже знакомы с History APIs браузера, работа с history будет казаться вам привычной при использовании Vue Router.

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