Uso

navigateTo está disponible tanto del lado del servidor como del lado del cliente. Se puede usar dentro del contexto de Nuxt, o directamente, para realizar la navegación de páginas.

Dentro de un Componente Vue

// pasando 'to' como una cadena
await navigateTo('/search')

// ... o como un objeto de ruta
await navigateTo({ path: '/search' })

// ... o como un objeto de ruta con parámetros de consulta
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})

Dentro de Middleware de Ruta

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // estableciendo el código de redirección a '301 Moved Permanently'
    return navigateTo('/search', { redirectCode: 301 })
  }
})

Al usar navigateTo dentro de middleware de ruta, debes devolver su resultado para asegurar que el flujo de ejecución del middleware funcione correctamente.

Por ejemplo, la siguiente implementación no funcionará como se espera:

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // ❌ Esto no funcionará como se espera
    navigateTo('/search', { redirectCode: 301 })
    return
  }
})

En este caso, navigateTo se ejecutará pero no se devolverá, lo que puede llevar a un comportamiento inesperado.

Navegando a una URL Externa

El parámetro external en navigateTo influye en cómo se maneja la navegación a URLs:

• Sin external: true:

  • Las URLs internas navegan como se espera.
  • Las URLs externas lanzan un error.

• Con external: true:

  • Las URLs internas navegan con una recarga completa de la página.
  • Las URLs externas navegan como se espera.

Ejemplo

// lanzará un error;
// navegar a una URL externa no está permitido por defecto
await navigateTo('https://nuxt.com')

// redirigirá exitosamente con el parámetro 'external' establecido en 'true'
await navigateTo('https://nuxt.com', {
  external: true
})

Abriendo una Página en una Nueva Pestaña

// abrirá 'https://nuxt.com' en una nueva pestaña
await navigateTo('https://nuxt.com', {
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500
    }
  }
})

Tipo

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 }>

Parámetros

to

Tipo: RouteLocationRaw | undefined | null

Por defecto: '/'

to puede ser una cadena simple o un objeto de ruta al que redirigir. Cuando se pasa como undefined o null, se establecerá por defecto en '/'.

Ejemplo

// Pasar la URL directamente redirigirá a la página '/blog'
await navigateTo('/blog')

// Usando el objeto de ruta, redirigirá a la ruta con el nombre 'blog'
await navigateTo({ name: 'blog' })

// Redirige a la ruta 'product' mientras pasa un parámetro (id = 1) usando el objeto de ruta.
await navigateTo({ name: 'product', params: { id: 1 } })

options (opcional)

Tipo: NavigateToOptions

Un objeto que acepta las siguientes propiedades:

• replace

  • Tipo: boolean

  • Por defecto: false

  • Por defecto, navigateTo empuja la ruta dada en la instancia del Vue Router del lado del cliente.

    Este comportamiento puede cambiarse estableciendo replace en true, para indicar que la ruta dada debe ser reemplazada.

• redirectCode

  • Tipo: number

  • Por defecto: 302

  • navigateTo redirige al camino dado y establece el código de redirección en 302 Found por defecto cuando la redirección se realiza del lado del servidor.

    Este comportamiento por defecto puede modificarse proporcionando un redirectCode diferente. Comúnmente, 301 Moved Permanently puede usarse para redirecciones permanentes.

• external

  • Tipo: boolean

  • Por defecto: false

  • Permite navegar a una URL externa cuando se establece en true. De lo contrario, navigateTo lanzará un error, ya que la navegación externa no está permitida por defecto.

• open

  • Tipo: OpenOptions

  • Permite navegar a la URL usando el método open() de la ventana. Esta opción solo es aplicable del lado del cliente y se ignorará del lado del servidor.

    Un objeto que acepta las siguientes propiedades:

  • target

    • Tipo: string

    • Por defecto: '_blank'

    • Una cadena, sin espacios, que especifica el nombre del contexto de navegación en el que se está cargando el recurso.

  • windowFeatures

    • Tipo: OpenWindowFeatures

    • Un objeto que acepta las siguientes propiedades:

      Propiedad	Tipo	Descripción
      popup	boolean	Solicita una ventana emergente mínima en lugar de una nueva pestaña, con características de UI decididas por el navegador.
      width o innerWidth	number	Especifica el ancho del área de contenido (mínimo 100 píxeles), incluyendo las barras de desplazamiento.
      height o innerHeight	number	Especifica la altura del área de contenido (mínimo 100 píxeles), incluyendo las barras de desplazamiento.
      left o screenX	number	Establece la posición horizontal de la nueva ventana en relación con el borde izquierdo de la pantalla.
      top o screenY	number	Establece la posición vertical de la nueva ventana en relación con el borde superior de la pantalla.
      noopener	boolean	Evita que la nueva ventana acceda a la ventana de origen a través de window.opener.
      noreferrer	boolean	Evita que se envíe el encabezado Referer e implícitamente habilita noopener.

      Consulta la documentación para obtener información más detallada sobre las propiedades de windowFeatures.