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

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

Переход к другому местоположению

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

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

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

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

// literal string path
router.push('/users/eduardo')

// object with path
router.push({ path: '/users/eduardo' })

// named route with params to let the router build the url
router.push({ name: 'user', params: { username: 'eduardo' } })

// with query, resulting in /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

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

const username = 'eduardo'
// we can manually build the url but we will have to handle the encoding ourselves
router.push(`/user/${username}`) // -> /user/eduardo
// same as
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// if possible use `name` and `params` to benefit from automatic URL encoding
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` cannot be used alongside `path`
router.push({ path: '/user', params: { username } }) // -> /user

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

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

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

Замена текущего местоположения

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

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

router.push({ path: '/home', replace: true })
// equivalent to
router.replace({ path: '/home' })

Переход по истории

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

Примеры

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

// go back by one record, the same as router.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, и они имитируют API window.history.

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

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