navigateTo

Использование

navigateTo доступен и на сервере, и на клиенте. Его можно использовать в контексте Nuxt или напрямую для программной навигации по страницам.

Во Vue-компоненте

<script setup lang="ts">
// строка URL
await navigateTo('/search')

// или объект маршрута
await navigateTo({ path: '/search' })

// или объект с query-параметрами
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc',
  },
})
</script>

В маршрутном middleware

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // код редиректа 301 Moved Permanently
    return navigateTo('/search', { redirectCode: 301 })
  }
})

При использовании navigateTo в маршрутном middleware нужно возвращать его результат, чтобы цепочка выполнения middleware работала корректно.

Например, следующий код не будет работать как ожидается:

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // ❌ Так не сработает
    navigateTo('/search', { redirectCode: 301 })
    return
  }
})

В этом случае navigateTo выполнится, но его результат не будет возвращён, что может привести к неожиданному поведению.

Переход по внешнему URL

Параметр external в navigateTo влияет на обработку URL:

• Без external: true:
  • Внутренние URL обрабатываются как обычно.
  • Внешние URL приводят к ошибке.
• С external: true:
  • Внутренние URL открываются с полной перезагрузкой страницы.
  • Внешние URL открываются как обычно.

Пример

<script setup lang="ts">
// вызовет ошибку: внешние URL по умолчанию запрещены
await navigateTo('https://nuxt.com')

// редирект с параметром external: true
await navigateTo('https://nuxt.com', {
  external: true,
})
</script>

Открытие страницы в новой вкладке

<script setup lang="ts">
// откроет https://nuxt.com в новой вкладке
await navigateTo('https://nuxt.com', {
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500,
    },
  },
})
</script>

Тип

export function navigateTo (
  to: RouteLocationRaw | undefined | null,
  options?: NavigateToOptions,
): Promise<void | NavigationFailure | false> | false | void | RouteLocationRaw

interface NavigateToOptions {
  replace?: boolean
  redirectCode?: number
  external?: boolean
  open?: OpenOptions
}

type OpenOptions = {
  target: string
  windowFeatures?: OpenWindowFeatures
}

type OpenWindowFeatures = {
  popup?: boolean
  noopener?: boolean
  noreferrer?: boolean
} & XOR<{ width?: number }, { innerWidth?: number }>
  & XOR<{ height?: number }, { innerHeight?: number }>
  & XOR<{ left?: number }, { screenX?: number }>
  & XOR<{ top?: number }, { screenY?: number }>

Параметры

to

Тип: RouteLocationRaw | undefined | null

По умолчанию: '/'

to — строка URL или объект маршрута для редиректа. При undefined или null используется '/'.

Пример

// Прямой URL — редирект на страницу /blog
await navigateTo('/blog')

// Объект маршрута — редирект по имени 'blog'
await navigateTo({ name: 'blog' })

// Редирект на маршрут 'product' с параметром id = 1
await navigateTo({ name: 'product', params: { id: 1 } })

options (необязательно)

Тип: NavigateToOptions

Объект со следующими свойствами:

• replace
  • Тип: boolean
  • По умолчанию: false
  • По умолчанию navigateTo добавляет маршрут в историю Vue Router на клиенте. При replace: true текущая запись в истории заменяется.
• redirectCode
  • Тип: number
  • По умолчанию: 302
  • При серверном редиректе по умолчанию возвращается 302 Found. Можно задать другой код, например 301 Moved Permanently для постоянного редиректа.
• external
  • Тип: boolean
  • По умолчанию: false
  • При true разрешён переход на внешний URL. Иначе navigateTo выбросит ошибку.
• open
  • Тип: OpenOptions
  • Открытие URL через open(). Работает только на клиенте.
  • target
    • Тип: string
    • По умолчанию: '_blank'
    • Имя контекста браузера (вкладки/окна).
  • windowFeatures
    • Тип: OpenWindowFeatures
    • Параметры окна:

      Свойство	Тип	Описание
      popup	boolean	Минимальное всплывающее окно вместо новой вкладки.
      width или innerWidth	number	Ширина области контента (мин. 100px).
      height или innerHeight	number	Высота области контента (мин. 100px).
      left или screenX	number	Горизонтальная позиция окна.
      top или screenY	number	Вертикальная позиция окна.
      noopener	boolean	Запрещает новому окну доступ через window.opener.
      noreferrer	boolean	Не отправлять заголовок Referer, включает noopener.

      
      Подробнее: документация windowFeatures.