useRouter

Исходный код
Экземпляр роутера через композабл useRouter.
pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>

В шаблоне для того же достаточно $router:

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

Если в проекте есть каталог pages/, поведение useRouter совпадает с экземпляром из vue-router.

Подробнее об интерфейсе Router в документации Vue 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 браузера

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

router.back()
router.forward()
router.go(3)
router.push({ path: '/home' })
router.replace({ hash: '#bio' })
Подробнее об интерфейсе History — в MDN.

Навигационные хуки

У useRouter есть afterEach, beforeEach и beforeResolve для перехвата навигации.

В Nuxt проще опираться на middleware маршрутов — отдельный механизм защиты маршрутов, удобнее в повседневной разработке.

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

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

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

Универсальный роутер без pages/

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