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

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

router.push(location, onComplete?, onAbort?)

Примечание: Внутри экземпляра Vue у вас есть доступ к экземпляру маршрутизатора через $router. Поэтому вы можете вызвать this.$router.push.

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

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

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

В качестве аргумента можно передать строку или объект, описывающий маршрут. Например:

// строка
router.push('home')

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

// именованный маршрут
router.push({ name: 'user', params: { userId: '123' } })

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

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

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// Это НЕ БУДЕТ работать
router.push({ path: '/user', params: { userId } }) // -> /user

Такие же правила применяются и к входному параметру to компонента router-link.

С версии 2.2.0+ можно опционально указать коллбэки onComplete и onAbort в router.push или router.replace в качестве 2-го и 3-го аргументов. Эти коллбэки будут вызываться когда навигация либо успешно завершена (после того как все асинхронные хуки будут завершены), или прервана (переходом на этот же маршрут, или на другой маршрут прежде чем текущая навигация будет завершена), соответственно.

С версии 3.1.0+ можно опустить 2-й и 3-й аргументы, в таком случае router.push/router.replace будут возвращать Promise, если они поддерживаются окружением.

Примечание: если путь назначения совпадает с текущим маршрутом и меняются только параметры (например, переход из одного профиля в другой /users/1 -> /users/2), вам потребуется использовать beforeRouteUpdate для отслеживания изменений (например, загрузки информации о пользователе).

router.replace(location, onComplete?, onAbort?)

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

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

router.go(n)

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

Примеры:

// перейти на одну запись вперёд, эквивалентно history.forward()
router.go(1)

// перейти на одну запись назад, эквивалентно history.back()
router.go(-1)

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

// если записей в истории недостаточно много, переход просто не произойдёт
router.go(-100)
router.go(100)

Манипулирование историей переходов

Вы могли заметить, что router.push, router.replace и router.go соответствуют window.history.pushState, window.history.replaceState и window.history.go (opens new window), имитируя таким образом API window.history.

По этой причине, если вы уже знакомы с API истории переходов браузера (opens new window), то и со Vue router неожиданностей не возникнет.

Стоит отметить, что методы навигации Vue router'а (push, replace, go) работают одинаково во всех режимах (history, hash и abstract).