Como funciona o sistema de rotas no Nuxt.js

O Nuxt utiliza um sistema de rotas baseado em arquivos, ou seja, todo arquivo ou diretório que você criar dentro da pasta /pages será transformado em uma página dentro do seu site com Nuxt e uma URL será criada para essa página com base no nome do arquivo, conforme exemplificado na tabela abaixo:

Os conceitos de rotas no Nuxt partem disso e neste artigo você vai se aprofundar e aprender todos os principais conceitos sobre rotas no Nuxt.

O sistema de roteamento do Nuxt

O sistema de roteamento do Nuxt é chamado de File System Routing, onde todo arquivo que é criado dentro da pasta /pages é transformado em uma página.

Por exemplo, considere a estrutura de pastas abaixo:

/*
/pages
  about.vue
  contact.vue
  privacy-policy.vue
*/

A partir desses arquivos, considerando que a URL seja https://lojaonline.com, o Nuxt vai gerar as seguintes URLs:

https://lojaonline.com/about
https://lojaonline.com/contact
https://lojaonline.com/privacy-policy

Rotas Dinâmicas

Para entender o que são rotas dinâmicas, imagine o seguinte cenário: você tem uma loja virtual chamada "Loja Online", e nessa loja virtual você tem vários produtos, e as páginas dos produtos são iguais, mudando apenas as informações exibidas.

"A Person Using Laptop" por Mart Production , licenciado por Pexels

Para solucionar esse desafio você pode utilizar as rotas dinâmicas do Nuxt, onde você vai criar um único arquivo de página que será utilizado para todos os produtos, e você pode fazer isso de duas formas:

Note que o nome escolhido foi "productSlug" e ele está entre colchetes: [ e ]. Essa é a sintaxe do Nuxt, o nome que escolhermos é o nome do parâmetro que podemos utilizar dentro do nosso código.

O resultado final será o mesmo, independentemente de criar o arquivo com o parâmetro no nome do diretório ou com o parâmetro no nome do arquivo, o resultado final será o mesmo.

Considerando a estrutura acima de páginas de produtos, imagine que o usuário está acessando a página do produto camiseta legal da marca chamada x, onde o slug da camiseta é camiseta-legal-marca-x: https://lojaonline.com/products/camiseta-legal-marca-x.

"A Man Shopping for Clothes at a Sneaker Shop" por RDNE Stock project , licenciado por Pexels

Podemos capturar o slug desse produto da seguinte forma:

<script setup>
const route = useRoute();
const slug = route.params.productSlug;
</script>

Mas o que é slug e por que foi definido que o slug desse produto é "productSlug"?

O Slug é semelhante a um id, ele funciona como um identificador único para páginas ou recursos de um site. O slug foi escolhido como camiseta-legal-marca-x para que ele seja um identificador amigável, que facilita a navegação do usuário e melhora o SEO.

Utilizaremos esse slug para buscar no banco de dados dessa loja, os detalhes e informações do produto "Camiseta Legal" da marca "X" e exibir na tela para o usuário.

Rotas aninhadas

As rotas aninhadas são úteis quando precisamos estruturar páginas que compartilham um mesmo layout, mas exibem conteúdos diferentes. Um exemplo clássico é o painel administrativo da Loja Online, que pode conter seções como Pedidos, Produtos e Configurações.

"Traditional Russian stacking dolls placed on table" por Diana , licenciado por Pexels

Imagine a seguinte estrutura de diretório e arquivos:

/pages
  /admin
    index.vue
    orders.vue
    products.vue
    settings.vue

Aqui, quando o usuário acessa https://lojaonline.com/admin, o arquivo index.vue dentro da pasta admin é carregado. Já as outras páginas serão acessadas assim:

https://lojaonline.com/admin/orders       -> Pedidos
https://lojaonline.com/admin/products     -> Produtos
https://lojaonline.com/admin/settings     -> Configurações

Se todas essas páginas compartilham o mesmo menu de navegação, o ideal é criar um arquivo layout.vue dentro da pasta /admin e usar o <NuxtPage /> para carregar o conteúdo dinâmico, evitando repetição de código.

O arquivo de layout no diretório /pages/admin/layout.vue ficaria dessa forma:

<template>
  <div>
    <nav>
      <NuxtLink to="/admin/orders">Pedidos</NuxtLink>
      <NuxtLink to="/admin/products">Produtos</NuxtLink>
      <NuxtLink to="/admin/settings">Configurações</NuxtLink>
    </nav>
    <NuxtPage />
  </div>
</template>

Com isso, todas as páginas dentro de /admin vão herdar essa estrutura, permitindo uma navegação mais fluida sem recarregar toda a interface.

Parâmetros de Consulta (Query)

Os parâmetros de consultas são utilizados para passar informações adicionais na URL, mas sem alterar a estrutura base da rota.

A estrutura é: ? + nome do parâmetro + = + valor do parâmetro:

?nome_do_parametro=valor_do_parametro

Se quiser adicionar mais parâmetros, basta adicionar o caractere &:

?nome_do_parametro=valor_do_parametro&nome_do_segundo_parametro=valor_do_segundo_parametro

No Nuxt podemos capturar esses parâmetros da seguinte forma:

<script setup>
// Instanciando uma variável que receberá informações da rota
const route = useRoute();

// Armazenando o parâmetro com nome "category" na variável productCategory
const productCategory = route.query.category;
</script>

E a partir disso podemos fazer a manipulação de dados que precisarmos ou até mesmo chamar alguma API com essa informação.

"Question Marks on Paper Crafts" por Leeloo The First , licenciado por Pexels

Os diferentes tipos de parâmetros de consulta (Query)

Há diversos motivos para utilizar um parâmetro de consulta, abaixo estão os principais usos, considere o mesmo exemplo da Loja Online:

Filtros e Ordenação: utilizados para aplicar filtros em uma lista como por exemplo: tamanho e cor da camiseta e ordenações como por exemplo, produtos mais baratos ou produtos mais caros.

https://lojaonline.com/camisetas?orderBy=cheapest

Paginação: utilizada em listas para carregar e exibir apenas alguns itens por vez. No exemplo abaixo, estamos na página "Promoções" e estamos visualizando a segunda página de itens promocionais:

https://lojaonline.com/promocoes?page=2

Busca de Dados: utilizada para buscar dados como por exemplo produtos por nome ou marca.

https://lojaonline.com/camisetas?name=camisa-legal

Estados temporários: utilizados para armazenar comportamentos temporários de uma aplicação, como por exemplo, visualização de produtos em lista ou grid.

https://lojaonline.com/promocoes?viewMode=grid

Conclusão

O sistema de rotas do Nuxt simplifica a criação e organização de páginas, tornando o desenvolvimento mais intuitivo. Desde as rotas básicas até as dinâmicas e aninhadas, a estrutura baseada em arquivos facilita a manutenção e melhora a experiência do usuário.

Além disso, os parâmetros de consulta permitem personalizar a navegação sem complicação, sendo úteis para filtros, buscas e estados temporários.

Com esse conhecimento, você consegue estruturar qualquer aplicação no Nuxt de forma eficiente, garantindo URLs organizadas e um fluxo de navegação bem definido.