navigateTo

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

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

Внутри компонента Vue

<script setup lang="ts">
// передаем 'to' в виде строки
await navigateTo('/search')

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

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

Внутри Route Middleware

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

Внешний 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>

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

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

Тип

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

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

Параметры

to

Тип: RouteLocationRaw | undefined | null

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

to может быть простой строкой или объектом маршрута, на который нужно перенаправить. Если передать undefined или null, то по умолчанию будет указано '/'.

options (опционально)

Тип: NavigateToOptions

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

• replace (опционально)
  Тип: boolean
  По умолчанию: false
  По умолчанию navigateTo пробрасывает заданный маршрут в экземпляр Vue Router на стороне клиента.
  Это поведение можно изменить, установив replace в true, чтобы указать, что данный маршрут должен быть заменен.
• redirectCode (опционально)
  Тип: number
  По умолчанию: 302
navigateTo перенаправляет на указанный путь и устанавливает код перенаправления на 302 Found по умолчанию, когда перенаправление происходит на стороне сервера.
  Это поведение по умолчанию можно изменить, указав другой redirectCode. Обычно для постоянных перенаправлений используется 301 Moved Permanently.
• external (опционально)
  Тип: boolean
  По умолчанию: false
  Позволяет переходить на внешний URL, если установлено значение true. В противном случае navigateTo выдаст ошибку, так как внешняя навигация по умолчанию запрещена.
• open (опционально)
  Тип: OpenOptions
  Позволяет перейти к URL с помощью метода open() окна. Этот параметр применим только на стороне клиента и будет игнорироваться на стороне сервера.
  Объект, принимающий следующие свойства:
  • target
    Тип: string
    По умолчанию: '_blank'
    Строка без пробелов, указывающая имя контекста просмотра, в который загружается ресурс.
  • windowFeatures (опционально)
    Тип: OpenWindowFeatures
    Объект, принимающий следующие свойства:
    • popup (опционально)
      Тип: boolean
    • width или innerWidth (опционально)
      Тип: number
    • height или innerHeight (опционально)
      Тип: number
    • left или screenX (опционально)
      Тип: number
    • top или screenY (опционально)
      Тип: number
    • noopener (опционально)
      Тип: boolean
    • noreferrer (опционально)
      Тип: boolean
    
    Более подробную информацию о свойствах windowFeatures см. в документации.