Nuxt: Páginas e Rotas

pages/products/[id].vue  →  /products/:id

<!-- pages/index.vue -->
<template>
  <div>
    <h1>MegaShop - Milhões de Produtos</h1>
    <NuxtLink to="/products">Navegar Produtos</NuxtLink>
  </div>
</template>

// Execução Bem-sucedida

<!-- pages/about.vue -->
<template>
  <div>
    <h1>Sobre a MegaShop</h1>
    <p>Atendendo mais de 1 milhão de produtos mundialmente</p>
  </div>
</template>

<!-- pages/products/[id].vue -->
<template>
  <div>
    <h1>Produto #{{ route.params.id }}</h1>
    <p>Preço: ${{ product?.price }} USD</p>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)
</script>

// Execução Bem-sucedida

<!-- pages/categories/[...slug].vue -->
<template>
  <div>
    <h1>Categoria: {{ slugPath }}</h1>
    <p>{{ products.length }} produtos encontrados</p>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
// /categories/electronics/headphones → slug = ['electronics', 'headphones']
const slugPath = computed(() => (route.params.slug as string[]).join('/'))
const { data: products } = await useFetch(`/api/categories/${slugPath.value}`)
</script>

// Execução Bem-sucedida

pages/
├── products/
│   ├── index.vue          # /products (filho)
│   ├── [id].vue           # /products/:id (filho)
│   └── edit.vue           # /products/edit (filho)
└── products.vue           # /products (pai com <NuxtPage />)

<!-- pages/products.vue - Layout pai -->
<template>
  <div>
    <nav class="product-nav">
      <NuxtLink to="/products">Todos os Produtos</NuxtLink>
      <NuxtLink to="/products/featured">Destaques</NuxtLink>
    </nav>
    <!-- Rotas filhas renderizam aqui -->
    <NuxtPage />
  </div>
</template>

// Execução Bem-sucedida

<!-- pages/products/index.vue - Filho: lista de produtos -->
<template>
  <div>
    <h1>Todos os Produtos</h1>
    <p>1 milhão de produtos disponíveis</p>
  </div>
</template>

<!-- pages/products/[id].vue - Filho: detalhe do produto -->
<template>
  <div>
    <h1>Detalhe do Produto</h1>
    <p>ID: {{ route.params.id }}</p>
  </div>
</template>

// No middleware ou contexto do lado do servidor
export default defineNuxtRouteMiddleware((to) => {
  const isAuthenticated = useState('isAuthenticated')

  if (!isAuthenticated.value && to.path.startsWith('/admin')) {
    return navigateTo('/login', { redirectCode: 302 })
  }
})

// Execução Bem-sucedida

<template>
  <button @click="goToProduct(product.id)">
    Ver Detalhes
  </button>
</template>

<script setup lang="ts">
const router = useRouter()

function goToProduct(id: number) {
  router.push(`/products/${id}`)
}
</script>

// Execução Bem-sucedida

<script setup lang="ts">
const route = useRoute()

// Acessar params
const productId = route.params.id         // De [id].vue
const categorySlug = route.params.slug     // De [...slug].vue

// Acessar query params
// /products?category=electronics&sort=price
const category = route.query.category      // 'electronics'
const sort = route.query.sort              // 'price'
</script>

// Execução Bem-sucedida

<!-- pages/404.vue -->
<template>
  <div class="not-found">
    <h1>404 - Produto Não Encontrado</h1>
    <p>O produto que você está procurando não existe.</p>
    <NuxtLink to="/products">Navegar todos os produtos</NuxtLink>
  </div>
</template>

// Execução Bem-sucedida

<!-- pages/index.vue - Homepage -->
<template>
  <div>
    <section class="hero">
      <h1>MegaShop</h1>
      <p>Mais de 1 milhão de produtos, entregues mundialmente</p>
      <NuxtLink to="/products">Comprar Agora</NuxtLink>
    </section>
    <section class="featured">
      <ProductCard v-for="p in featured" :key="p.id" :product="p" />
    </section>
  </div>
</template>

<script setup lang="ts">
const { data: featured } = await useFetch('/api/products/featured')
</script>

<!-- pages/products/[id].vue - Detalhe do Produto -->
<template>
  <div v-if="product">
    <h1>{{ product.name }}</h1>
    <p class="price">${{ product.price }} USD</p>
    <button @click="addToCart">Adicionar ao Carrinho</button>
    <button @click="goBack">Voltar à Lista</button>
  </div>
  <div v-else>
    <p>Produto não encontrado</p>
    <NuxtLink to="/products">Navegar Produtos</NuxtLink>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)

function addToCart() {
  navigateTo('/cart')
}

function goBack() {
  router.back()
}
</script>