Uma das principais funcionalidades do Nuxt é o roteador de sistema de arquivos. Cada arquivo Vue dentro do diretório pages/ cria uma URL correspondente (ou rota) que exibe o conteúdo do arquivo. Ao usar importações dinâmicas para cada página, o Nuxt aproveita a divisão de código para enviar a quantidade mínima de JavaScript para a rota solicitada.

Páginas

O roteamento do Nuxt é baseado no vue-router e gera as rotas a partir de cada componente criado no diretório pages/, com base no nome do arquivo.

Este roteamento de sistema de arquivos usa convenções de nomenclatura para criar rotas dinâmicas e aninhadas:

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

Navegação

O componente <NuxtLink> liga as páginas entre si. Ele renderiza uma tag <a> com o atributo href definido para a rota da página. Uma vez que a aplicação é hidratada, as transições de página são realizadas em JavaScript atualizando a URL do navegador. Isso evita atualizações completas da página e permite transições animadas.

Quando um <NuxtLink> entra no viewport no lado do cliente, o Nuxt irá automaticamente pré-carregar componentes e payload (páginas geradas) das páginas vinculadas antecipadamente, resultando em uma navegação mais rápida.

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">Sobre</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 Rota

O composable useRoute() pode ser usado em um bloco <script setup> ou em um método setup() de um componente Vue para acessar os detalhes da rota atual.

const route = useRoute()

// Ao acessar /posts/1, route.params.id será 1
console.log(route.params.id)

Middleware de Rota

O Nuxt fornece um framework de middleware de rota personalizável que você pode usar em toda a sua aplicação, ideal para extrair código que você deseja executar antes de navegar para uma rota específica.

Existem três tipos de middleware de rota:

1. Middleware de rota anônimo (ou inline), que são definidos diretamente nas páginas onde são usados.
2. Middleware de rota nomeado, que são colocados no diretório middleware/ e serão carregados automaticamente via importação assíncrona quando usados em uma página. (Nota: O nome do middleware de rota é normalizado para kebab-case, então someMiddleware se torna some-middleware.)
3. Middleware de rota global, que são colocados no diretório middleware/ (com um sufixo .global) e serão executados automaticamente em cada mudança de rota.

Exemplo de um middleware auth protegendo a página /dashboard:

function isAuthenticated(): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() é um método de exemplo que verifica se um usuário está autenticado
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

Validação de Rota

O Nuxt oferece validação de rota através da propriedade validate em definePageMeta() em cada página que você deseja validar.

A propriedade validate aceita a route como argumento. Você pode retornar um valor booleano para determinar se esta é ou não uma rota válida para ser renderizada com esta página. Se você retornar false, isso causará um erro 404. Você também pode retornar diretamente um objeto com statusCode/statusMessage para personalizar o erro retornado.

Se você tiver um caso de uso mais complexo, então pode usar middleware de rota anônimo em vez disso.

definePageMeta({
  validate: async (route) => {
    // Verifique se o id é composto por dígitos
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})