Adicionando rotas personalizadas

No Nuxt, seu roteamento é definido pela estrutura dos seus arquivos dentro do diretório de páginas. No entanto, como ele usa vue-router internamente, o Nuxt oferece várias maneiras de adicionar rotas personalizadas ao seu projeto.

Configuração do Router

Usando opções do router, você pode opcionalmente substituir ou estender suas rotas usando uma função que aceita as rotas escaneadas e retorna rotas personalizadas.

Se retornar null ou undefined, o Nuxt usará as rotas padrão (útil para modificar o 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

Você pode adicionar, alterar ou remover páginas das rotas escaneadas com o hook pages:extend do Nuxt.

Por exemplo, para evitar a criação de rotas para quaisquer arquivos .ts:

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

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

      // remover rotas
      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 Nuxt

Se você planeja adicionar um conjunto completo de páginas relacionadas a uma funcionalidade específica, pode querer usar um módulo Nuxt.

O kit Nuxt fornece algumas maneiras de adicionar rotas:

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

Opções do Router

Além de personalizar opções para o vue-router, o Nuxt oferece opções adicionais para personalizar o router.

Usando app/router.options

Esta é a maneira recomendada de especificar opções do router.

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

export default {
} satisfies RouterConfig

É possível adicionar mais arquivos de opções do router adicionando arquivos dentro do hook pages:routerOptions. Itens posteriores no array substituem os anteriores.

import { createResolver } from '@nuxt/kit'

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

Usando nuxt.config

Nota: Somente opções serializáveis em JSON são configuráveis:

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

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

Modo Hash (SPA)

Você pode habilitar o histórico de hash no modo SPA usando a configuração hashMode. Neste modo, o router usa um caractere de hash (#) antes da URL real que é passada internamente. Quando habilitado, a URL nunca é enviada para o servidor e SSR não é suportado.

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

Comportamento de Rolagem para links de hash

Você pode opcionalmente personalizar o comportamento de rolagem para links de hash. Quando você define a configuração para ser smooth e carrega uma página com um link de hash (por exemplo, https://example.com/blog/my-article#comments), verá que o navegador rola suavemente até este âncora.

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

Histórico Personalizado (avançado)

Você pode opcionalmente substituir o modo de histórico usando uma função que aceita a URL base e retorna o modo de histórico. Se retornar null ou undefined, o Nuxt usará o histórico padrão.

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