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

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

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

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

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

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

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

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /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
// This will NOT work
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 вернут промис, если поддержка промисов есть.

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

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

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

router.go(n)

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

Примеры

// go forward by one record, the same as history.forward()
router.go(1)

// go back by one record, the same as history.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records.
router.go(-100)
router.go(100)

Управление историей

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

Поэтому, если вы уже знакомы с API истории браузера, манипулировать историей будет очень легко с помощью Vue Router.

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