Nuxt Nation conference is coming. Join us on November 12-13.
Композабл 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.

Прочитайте документацию vue-router об интерфейсе Router.

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

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

Основанные на 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.
Example
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 > Guide > Directory Structure > Middleware.

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

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

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

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