useRouter

<script setup lang="ts">
const router = useRouter()
</script>

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

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

Если у вас есть директория pages/, то useRouter по своему поведению идентичен тому, который предоставляется vue-router.

Основные манипуляции

• addRoute(): Добавляет новый маршрут в инстанс маршрутизатора. Можно указать parentName, чтобы добавить новый маршрут в качестве дочернего для существующего маршрута.
• removeRoute(): Удаляет существующий маршрут по его имени.
• getRoutes(): Получает полный список всех записей маршрутов.
• hasRoute(): Проверяет, существует ли маршрут с заданным именем.
• resolve(): Возвращает нормализованную версию местоположения маршрута. Также содержит свойство href, которое включает любую существующую базу.

const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })

Основанные на History API

• back(): Возвращает назад в history, если это возможно, аналогично router.go(-1).
• forward(): Переходит вперед в history, если это возможно, аналогично router.go(1).
• go(): Перемещение вперед или назад по hitory без иерархических ограничений, применяемых в router.back() и router.forward().
• push(): Программно переходит к новому URL-адресу, проталкивая запись в стек history. Вместо этого рекомендуется использовать navigateTo.
• replace(): Программно переходит к новому URL-адресу, заменяя текущую запись в стеке history маршрутов. Вместо этого рекомендуется использовать navigateTo.

const router = useRouter()

router.back()
router.forward()
router.go(3)
router.push({ path: "/home" })
router.replace({ hash: "#bio" })

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

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

Однако в Nuxt есть концепция route middleware, которая упрощает реализацию навигационной защиты и обеспечивает лучший опыт разработчика.

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

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

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

Если у вас нет папки pages/, то useRouter вернет универсальный инстанс маршрутизатора с аналогичными вспомогательными методами, но имейте в виду, что не все функции могут поддерживаться или вести себя точно так же, как во vue-router.