Императивная навигация

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

router.push(location)

Для перехода к новому 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' }})

router.replace(location)

Действует подобно 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, имитируя таким образом API window.history.

По этой причине, если вы уже знакомы с API истории переходов браузера, то и со vue-router неожиданностей не возникнет.

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

results matching ""

    No results matching ""