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

<!-- pages/index.vue -->
<template>
  <div>
    <h1>MegaShop - Millions of Products</h1>
    <NuxtLink to="/products">Browse Products</NuxtLink>
  </div>
</template>

// Execution Successful

<!-- pages/about.vue -->
<template>
  <div>
    <h1>About MegaShop</h1>
    <p>Serving over 1 million products worldwide</p>
  </div>
</template>

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

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

// Execution Successful

<!-- pages/categories/[...slug].vue -->
<template>
  <div>
    <h1>Category: {{ slugPath }}</h1>
    <p>{{ products.length }} products found</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>

// Execution Successful

pages/
├── products/
│   ├── index.vue          # /products (فرعي)
│   ├── [id].vue           # /products/:id (فرعي)
│   └── edit.vue           # /products/edit (فرعي)
└── products.vue           # /products (أب مع <NuxtPage />)

<!-- pages/products.vue - تخطيط أب -->
<template>
  <div>
    <nav class="product-nav">
      <NuxtLink to="/products">All Products</NuxtLink>
      <NuxtLink to="/products/featured">Featured</NuxtLink>
    </nav>
    <!-- المسارات الفرعية تُعرض هنا -->
    <NuxtPage />
  </div>
</template>

// Execution Successful

<!-- pages/products/index.vue - فرعي: قائمة المنتجات -->
<template>
  <div>
    <h1>All Products</h1>
    <p>1 million products available</p>
  </div>
</template>

<!-- pages/products/[id].vue - فرعي: تفاصيل المنتج -->
<template>
  <div>
    <h1>Product Detail</h1>
    <p>ID: {{ route.params.id }}</p>
  </div>
</template>

// في وسيط أو سياق جانب الخادم
export default defineNuxtRouteMiddleware((to) => {
  const isAuthenticated = useState('isAuthenticated')

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

// Execution Successful

<template>
  <button @click="goToProduct(product.id)">
    View Details
  </button>
</template>

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

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

// Execution Successful

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

# الوصول إلى المعلمات
const productId = route.params.id         # من [id].vue
const categorySlug = route.params.slug     # من [...slug].vue

# الوصول إلى معلمات الاستعلام
# /products?category=electronics&sort=price
const category = route.query.category      # 'electronics'
const sort = route.query.sort              # 'price'
</script>

// Execution Successful

<!-- pages/404.vue -->
<template>
  <div class="not-found">
    <h1>404 - Product Not Found</h1>
    <p>The product you're looking for doesn't exist.</p>
    <NuxtLink to="/products">Browse all products</NuxtLink>
  </div>
</template>

// Execution Successful

<!-- pages/index.vue - الصفحة الرئيسية -->
<template>
  <div>
    <section class="hero">
      <h1>MegaShop</h1>
      <p>Over 1 million products, delivered worldwide</p>
      <NuxtLink to="/products">Shop Now</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 - تفاصيل المنتج -->
<template>
  <div v-if="product">
    <h1>{{ product.name }}</h1>
    <p class="price">${{ product.price }} USD</p>
    <button @click="addToCart">Add to Cart</button>
    <button @click="goBack">Back to List</button>
  </div>
  <div v-else>
    <p>Product not found</p>
    <NuxtLink to="/products">Browse Products</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>