Una característica principal de Nuxt es el enrutador del sistema de archivos. Cada archivo Vue dentro del directorio pages/ crea una URL correspondiente (o ruta) que muestra el contenido del archivo. Al usar importaciones dinámicas para cada página, Nuxt aprovecha la división de código para enviar la cantidad mínima de JavaScript para la ruta solicitada.

Páginas

El enrutamiento de Nuxt se basa en vue-router y genera las rutas a partir de cada componente creado en el directorio pages/, basado en sus nombres de archivo.

Este enrutamiento del sistema de archivos utiliza convenciones de nomenclatura para crear rutas dinámicas y anidadas:

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

Navegación

El componente <NuxtLink> enlaza páginas entre sí. Renderiza una etiqueta <a> con el atributo href configurado a la ruta de la página. Una vez que la aplicación está hidratada, las transiciones de página se realizan en JavaScript actualizando la URL del navegador. Esto evita recargas completas de la página y permite transiciones animadas.

Cuando un <NuxtLink> entra en el viewport en el lado del cliente, Nuxt prefetch automáticamente los componentes y la carga útil (páginas generadas) de las páginas enlazadas con anticipación, resultando en una navegación más rápida.

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Parámetros de Ruta

El composable useRoute() se puede usar en un bloque <script setup> o en un método setup() de un componente Vue para acceder a los detalles de la ruta actual.

const route = useRoute()

// Al acceder a /posts/1, route.params.id será 1
console.log(route.params.id)

Middleware de Ruta

Nuxt proporciona un marco de middleware de ruta personalizable que puedes usar en toda tu aplicación, ideal para extraer código que deseas ejecutar antes de navegar a una ruta particular.

Hay tres tipos de middleware de ruta:

1. Middleware de ruta anónimo (o en línea), que se define directamente en las páginas donde se utilizan.
2. Middleware de ruta nombrado, que se coloca en el directorio middleware/ y se cargará automáticamente mediante importación asíncrona cuando se use en una página. (Nota: El nombre del middleware de ruta se normaliza a kebab-case, por lo que someMiddleware se convierte en some-middleware.)
3. Middleware de ruta global, que se coloca en el directorio middleware/ (con un sufijo .global) y se ejecutará automáticamente en cada cambio de ruta.

Ejemplo de un middleware auth protegiendo la página /dashboard:

function isAuthenticated(): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() es un método de ejemplo que verifica si un usuario está autenticado
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

Validación de Ruta

Nuxt ofrece validación de rutas a través de la propiedad validate en definePageMeta() en cada página que desees validar.

La propiedad validate acepta la route como argumento. Puedes devolver un valor booleano para determinar si esta es una ruta válida para ser renderizada con esta página. Si devuelves false, esto causará un error 404. También puedes devolver directamente un objeto con statusCode/statusMessage para personalizar el error devuelto.

Si tienes un caso de uso más complejo, entonces puedes usar middleware de ruta anónimo en su lugar.

definePageMeta({
  validate: async (route) => {
    // Verifica si el id está compuesto por dígitos
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})