Enrutamiento Interno

En este ejemplo, usamos el componente <NuxtLink> para enlazar a otra página de la aplicación.

<template>
  <NuxtLink to="/about">Página de About</NuxtLink>
</template>

Pasar Parámetros a Rutas Dinámicas

En este ejemplo, pasamos el parámetro id para enlazar a la ruta ~/pages/posts/[id].vue.

<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>

Manejo de Archivos Estáticos y Enlaces entre Aplicaciones

Por defecto, <NuxtLink> utiliza la navegación del lado del cliente de Vue Router para rutas relativas. Al enlazar a archivos estáticos en el directorio /public o a otra aplicación alojada en el mismo dominio, podría resultar en errores 404 inesperados porque no son parte de las rutas del cliente. En tales casos, puedes usar la propiedad external con <NuxtLink> para evitar el mecanismo de enrutamiento interno de Vue Router.

La propiedad external indica explícitamente que el enlace es externo. <NuxtLink> renderizará el enlace como una etiqueta <a> estándar de HTML. Esto asegura que el enlace se comporte correctamente, evitando la lógica de Vue Router y apuntando directamente al recurso.

Enlazar a Archivos Estáticos

Para archivos estáticos en el directorio /public, como PDFs o imágenes, usa la propiedad external para asegurar que el enlace se resuelva correctamente.

<template>
  <NuxtLink to="/example-report.pdf" external>
    Descargar Reporte
  </NuxtLink>
</template>

Enlazar a una URL de Otra Aplicación

Al apuntar a una aplicación diferente en el mismo dominio, usar la propiedad external asegura el comportamiento correcto.

<template>
  <NuxtLink to="/another-app" external>
    Ir a Otra Aplicación
  </NuxtLink>
</template>

Usar la propiedad external o confiar en el manejo automático asegura una navegación adecuada, evita problemas de enrutamiento inesperados y mejora la compatibilidad con recursos estáticos o escenarios entre aplicaciones.

Enrutamiento Externo

En este ejemplo, usamos el componente <NuxtLink> para enlazar a un sitio web.

<template>
  <NuxtLink to="https://nuxtjs.org">
    Sitio web de Nuxt
  </NuxtLink>
  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>

Atributos rel y noRel

Un atributo rel de noopener noreferrer se aplica por defecto a los enlaces con un atributo target o a enlaces absolutos (por ejemplo, enlaces que comienzan con http://, https://, o //).

• noopener soluciona un problema de seguridad en navegadores antiguos.
• noreferrer mejora la privacidad de tus usuarios al no enviar el encabezado Referer al sitio enlazado.

Estos valores predeterminados no tienen un impacto negativo en el SEO y se consideran mejores prácticas.

Cuando necesites sobrescribir este comportamiento, puedes usar las propiedades rel o noRel.

<template>
  <NuxtLink to="https://twitter.com/nuxt_js">
    Nuxt Twitter
  </NuxtLink>
  <!-- <a href="https://twitter.com/nuxt_js" rel="noopener noreferrer">...</a> -->

  <NuxtLink to="https://discord.nuxtjs.org" rel="noopener">
    Nuxt Discord
  </NuxtLink>
  <!-- <a href="https://discord.nuxtjs.org" rel="noopener">...</a> -->

  <NuxtLink to="/about" target="_blank">Página de About</NuxtLink>
  <!-- <a href="/about" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

Una propiedad noRel puede usarse para evitar que el atributo rel predeterminado se agregue a los enlaces absolutos.

<template>
  <NuxtLink to="https://github.com/nuxt" no-rel>
    Nuxt GitHub
  </NuxtLink>
  <!-- <a href="https://github.com/nuxt">...</a> -->
</template>

Precarga de Enlaces

Nuxt incluye automáticamente una precarga inteligente. Eso significa que detecta cuando un enlace es visible (por defecto), ya sea en el viewport o al desplazarse, y precarga el JavaScript para esas páginas para que estén listas cuando el usuario haga clic en el enlace. Nuxt solo carga los recursos cuando el navegador no está ocupado y omite la precarga si tu conexión está fuera de línea o si solo tienes conexión 2g.

<NuxtLink to="/about" no-prefetch>Página de About no precargada</NuxtLink>
<NuxtLink to="/about" :prefetch="false">Página de About no precargada</NuxtLink>

Disparadores de Precarga Personalizados

Ahora admitimos disparadores de precarga personalizados para <NuxtLink> después de v3.13.0. Puedes usar la propiedad prefetchOn para controlar cuándo precargar enlaces.

<template>
  <NuxtLink prefetch-on="visibility">
    Esto se precargará cuando se vuelva visible (por defecto)
  </NuxtLink>

  <NuxtLink prefetch-on="interaction">
    Esto se precargará cuando se pase el ratón por encima o cuando gane foco
  </NuxtLink>
</template>

• visibility: Precarga cuando el enlace se vuelve visible en el viewport. Monitorea la intersección del elemento con el viewport usando la API de Intersection Observer. La precarga se activa cuando el elemento se desplaza a la vista.
• interaction: Precarga cuando el enlace es pasado por el ratón o enfocado. Este enfoque escucha los eventos pointerenter y focus, precargando proactivamente los recursos cuando el usuario indica intención de interactuar.

También puedes usar un objeto para configurar prefetchOn:

<template>
  <NuxtLink :prefetch-on="{ interaction: true }">
    Esto se precargará cuando se pase el ratón por encima o cuando gane foco
  </NuxtLink>
</template>

¡Probablemente no quieras ambos habilitados!

<template>
  <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
    Esto se precargará cuando se pase el ratón/enfoque - o cuando se vuelva visible
  </NuxtLink>
</template>

Esta configuración observará cuando el elemento entre en el viewport y también escuchará los eventos pointerenter y focus. Esto puede resultar en un uso innecesario de recursos o precargas redundantes, ya que ambos disparadores pueden precargar el mismo recurso bajo diferentes condiciones.

Habilitar Precarga de Origen Cruzado

Para habilitar la precarga de origen cruzado, puedes establecer la opción crossOriginPrefetch en tu nuxt.config. Esto habilitará la precarga de origen cruzado usando la API de Reglas de Especulación.

export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true,
  },
})

Deshabilitar la precarga globalmente

También es posible habilitar/deshabilitar la precarga de todos los enlaces globalmente para tu aplicación.

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: false,
      },
    },
  },
})

Props

RouterLink

Cuando no se usa external, <NuxtLink> admite todas las props de RouterLink de Vue Router.

• to: Cualquier URL o un objeto de ubicación de ruta de Vue Router
• custom: Si <NuxtLink> debe envolver su contenido en un elemento <a>. Permite tomar el control total de cómo se renderiza un enlace y cómo funciona la navegación cuando se hace clic. Funciona igual que la prop custom de Vue Router
• exactActiveClass: Una clase para aplicar en enlaces activos exactos. Funciona igual que la prop exactActiveClass de Vue Router en enlaces internos. Por defecto es la predeterminada de Vue Router ("router-link-exact-active")
• activeClass: Una clase para aplicar en enlaces activos. Funciona igual que la prop activeClass de Vue Router en enlaces internos. Por defecto es la predeterminada de Vue Router ("router-link-active")
• replace: Funciona igual que la prop replace de Vue Router en enlaces internos
• ariaCurrentValue: Un valor de atributo aria-current para aplicar en enlaces activos exactos. Funciona igual que la prop ariaCurrentValue de Vue Router en enlaces internos

NuxtLink

• href: Un alias para to. Si se usa con to, href será ignorado
• noRel: Si se establece en true, no se agregará ningún atributo rel al enlace externo
• external: Fuerza que el enlace se renderice como una etiqueta <a> en lugar de un RouterLink de Vue Router.
• prefetch: Cuando está habilitado, precargará middleware, diseños y cargas útiles (cuando se usa payloadExtraction) de enlaces en el viewport. Usado por la configuración experimental crossOriginPrefetch.
• prefetchOn: Permite el control personalizado de cuándo precargar enlaces. Las opciones posibles son interaction y visibility (por defecto). También puedes pasar un objeto para un control total, por ejemplo: { interaction: true, visibility: true }. Esta prop solo se usa cuando prefetch está habilitado (por defecto) y noPrefetch no está establecido.
• noPrefetch: Deshabilita la precarga.
• prefetchedClass: Una clase para aplicar a enlaces que han sido precargados.

Anchor

• target: Un valor de atributo target para aplicar en el enlace
• rel: Un valor de atributo rel para aplicar en el enlace. Por defecto es "noopener noreferrer" para enlaces externos.

Sobrescribir Valores Predeterminados

En la Configuración de Nuxt

Puedes sobrescribir algunos valores predeterminados de <NuxtLink> en tu nuxt.config

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        // valores predeterminados
        componentName: 'NuxtLink',
        externalRelAttribute: 'noopener noreferrer',
        activeClass: 'router-link-active',
        exactActiveClass: 'router-link-exact-active',
        prefetchedClass: undefined, // puede ser cualquier nombre de clase de cadena válido
        trailingSlash: undefined // puede ser 'append' o 'remove'
        prefetch: true,
        prefetchOn: { visibility: true } 
      }
    }
  }
})

Componente de Enlace Personalizado

Puedes sobrescribir los valores predeterminados de <NuxtLink> creando tu propio componente de enlace usando defineNuxtLink.

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* ver firma a continuación para más */
})

Luego puedes usar el componente <MyNuxtLink /> como de costumbre con tus nuevos valores predeterminados.

Firma de defineNuxtLink

interface NuxtLinkOptions {
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  trailingSlash?: 'append' | 'remove'
  prefetch?: boolean
  prefetchedClass?: string
  prefetchOn?: Partial<{
    visibility: boolean
    interaction: boolean
  }>
}
function defineNuxtLink(options: NuxtLinkOptions): Component {}

• componentName: Un nombre para el componente. El valor predeterminado es NuxtLink.
• externalRelAttribute: Un valor de atributo rel predeterminado aplicado en enlaces externos. Por defecto es "noopener noreferrer". Establécelo en "" para deshabilitar
• activeClass: Una clase predeterminada para aplicar en enlaces activos. Funciona igual que la opción linkActiveClass de Vue Router. Por defecto es la predeterminada de Vue Router ("router-link-active")
• exactActiveClass: Una clase predeterminada para aplicar en enlaces activos exactos. Funciona igual que la opción linkExactActiveClass de Vue Router. Por defecto es la predeterminada de Vue Router ("router-link-exact-active")
• trailingSlash: Una opción para agregar o eliminar barras diagonales finales en el href. Si no se establece o no coincide con los valores válidos append o remove, se ignorará.
• prefetch: Si se deben precargar enlaces por defecto.
• prefetchOn: Control granular de qué estrategias de precarga aplicar por defecto.
• prefetchedClass: Una clase predeterminada para aplicar a enlaces que han sido precargados.