useRouter

Source
Компосабл useRouter возвращает экземпляр роутера.
app/pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>

Если роутер нужен только в шаблоне, используйте $router:

app/pages/index.vue
<template>
  <button @click="$router.back()">
    Назад
  </button>
</template>

При наличии директории app/pages/ поведение useRouter совпадает с vue-router.

Документация vue-router по интерфейсу Router.

Базовые операции

  • addRoute(): добавить маршрут. Можно указать parentName, чтобы добавить дочерний к существующему.
  • removeRoute(): удалить маршрут по имени.
  • getRoutes(): получить список всех записей маршрутов.
  • hasRoute(): проверить наличие маршрута по имени.
  • resolve(): нормализованная версия локации маршрута, включая свойство href с учётом base.
Пример
const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })
router.addRoute() добавляет маршрут в массив и полезен при создании Nuxt-плагинов. router.push() сразу выполняет навигацию и удобен на страницах, в компонентах и компосаблах.

History API

  • back(): назад по истории (аналог router.go(-1)).
  • forward(): вперёд по истории (аналог router.go(1)).
  • go(): перемещение по истории без ограничений back()/forward().
  • push(): программная навигация с добавлением записи в историю. Рекомендуется использовать navigateTo.
  • replace(): программная навигация с заменой текущей записи в истории. Рекомендуется использовать navigateTo.
Пример
const router = useRouter()

router.back()
router.forward()
router.go(3)
router.push({ path: '/home' })
router.replace({ hash: '#bio' })
Подробнее о History API в браузере.

Навигационные гарды

Компосабл useRouter предоставляет методы afterEach, beforeEach и beforeResolve в качестве навигационных гардов.

В Nuxt для этого удобнее использовать route middleware.

Узнать больше Docs > 4 X > Directory Structure > App > Middleware.

Промисы и обработка ошибок

  • isReady(): промис, резолвящийся по завершении начальной навигации.
  • onError: обработчик ошибок при навигации.
Узнать больше Vue Router Docs.

Универсальный роутер

Если директории app/pages/ нет, useRouter вернёт универсальный экземпляр роутера с похожими методами; не все возможности могут поддерживаться или вести себя так же, как в vue-router.