Añadiendo rutas personalizadas

En Nuxt, tus rutas se definen por la estructura de tus archivos dentro del directorio de páginas. Sin embargo, dado que utiliza vue-router internamente, Nuxt te ofrece varias formas de agregar rutas personalizadas en tu proyecto.

Configuración del Router

Usando opciones del router, puedes opcionalmente sobrescribir o extender tus rutas usando una función que acepta las rutas escaneadas y devuelve rutas personalizadas.

Si devuelve null o undefined, Nuxt volverá a las rutas predeterminadas (útil para modificar el array de entrada).

import type { RouterConfig } from '@nuxt/schema'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/home.vue')
    }
  ],
} satisfies RouterConfig

Hook de Páginas

Puedes agregar, cambiar o eliminar páginas de las rutas escaneadas con el hook pages:extend de nuxt.

Por ejemplo, para evitar crear rutas para cualquier archivo .ts:

import type { NuxtPage } from '@nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      // agregar una ruta
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // eliminar rutas
      function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
        const pagesToRemove: NuxtPage[] = []
        for (const page of pages) {
          if (page.file && pattern.test(page.file)) {
            pagesToRemove.push(page)
          } else {
            removePagesMatching(pattern, page.children)
          }
        }
        for (const page of pagesToRemove) {
          pages.splice(pages.indexOf(page), 1)
        }
      }
      removePagesMatching(/\.ts$/, pages)
    }
  }
})

Módulo de Nuxt

Si planeas agregar un conjunto completo de páginas relacionadas con una funcionalidad específica, podrías querer usar un módulo de Nuxt.

El kit de Nuxt proporciona algunas formas de agregar rutas:

• extendPages (callback: pages => void)
• extendRouteRules (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)

Opciones del Router

Además de personalizar opciones para vue-router, Nuxt ofrece opciones adicionales para personalizar el router.

Usando app/router.options

Esta es la forma recomendada de especificar opciones del router.

import type { RouterConfig } from '@nuxt/schema'

export default {
} satisfies RouterConfig

Es posible agregar más archivos de opciones del router añadiendo archivos dentro del hook pages:routerOptions. Los elementos posteriores en el array sobrescriben a los anteriores.

import { createResolver } from '@nuxt/kit'

export default defineNuxtConfig({
  hooks: {
    'pages:routerOptions' ({ files }) {
      const resolver = createResolver(import.meta.url)
      // agregar una ruta
      files.push({
        path: resolver.resolve('./runtime/app/router-options'),
        optional: true
      })
    }
  }
})

Usando nuxt.config

Nota: Solo las opciones serializables en JSON son configurables:

• linkActiveClass
• linkExactActiveClass
• end
• sensitive
• strict
• hashMode
• scrollBehaviorType

export default defineNuxtConfig({
  router: {
    options: {}
  }
})

Modo Hash (SPA)

Puedes habilitar el historial de hash en modo SPA usando la configuración hashMode. En este modo, el router utiliza un carácter de hash (#) antes de la URL real que se pasa internamente. Cuando está habilitado, la URL nunca se envía al servidor y SSR no es compatible.

export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

Comportamiento de Desplazamiento para enlaces de hash

Puedes personalizar opcionalmente el comportamiento de desplazamiento para enlaces de hash. Cuando configuras la configuración para ser smooth y cargas una página con un enlace de hash (por ejemplo, https://example.com/blog/my-article#comments), verás que el navegador se desplaza suavemente hacia este ancla.

export default defineNuxtConfig({
  router: {
    options: {
      scrollBehaviorType: 'smooth'
    }
  }
})

Historial Personalizado (avanzado)

Puedes opcionalmente sobrescribir el modo de historial usando una función que acepta la URL base y devuelve el modo de historial. Si devuelve null o undefined, Nuxt volverá al historial predeterminado.

import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions.html
  history: base => import.meta.client ? createMemoryHistory(base) : null /* default */
} satisfies RouterConfig