BÀI 3: ROUTING TỰ ĐỘNG VỚI pages/

Chào mừng đến với Bài 3 – Làm quen với pages và hệ thống routing tự động trong Nuxt. Đây là một trong những tính năng nổi bật của Nuxt: tạo router tự động chỉ bằng cách tạo file .vue trong thư mục pages/.

---

1. Mỗi file .vue trong pages/ là một route

Ví dụ:

Tạo file: pages/index.vue

📋 Copy<template>
  <h1>Trang chủ</h1>
</template>

Mặc định route: http://localhost:3000/

---

Tạo file: pages/about.vue

📋 Copy<template>
  <h1>Trang Giới thiệu</h1>
</template>

Mặc định route: http://localhost:3000/about

---

2. Route con – nested route

Tạo thư mục: pages/blog/

Rồi tạo file pages/blog/index.vue:

📋 Copy<template>
  <h1>Blog Home</h1>
</template>

Truy cập: http://localhost:3000/blog

---

Tạo thêm: pages/blog/post.vue

📋 Copy<template>
  <h2>Bài viết giới thiệu</h2>
</template>

Truy cập: http://localhost:3000/blog/post

---

3. Route động – truyền biến qua URL

Tạo file: pages/user/[id].vue

📋 Copy<template>
  <h1>Trang người dùng: {{ id }}</h1>
</template>

<script setup>
const route = useRoute()
const id = route.params.id
</script>

Truy cập: http://localhost:3000/user/123
Kết quả: “Trang người dùng: 123”

---

4. Route động nhiều cấp

Tạo file: pages/product/[category]/[slug].vue

📋 Copy<template>
  <div>
    <h2>Sản phẩm: {{ slug }}</h2>
    <p>Danh mục: {{ category }}</p>
  </div>
</template>

<script setup>
const { category, slug } = useRoute().params
</script>

Truy cập: http://localhost:3000/product/ao-thun/mickey

---

5. Redirect mặc định

Bạn có thể dùng definePageMeta để cấu hình:

📋 Copy<script setup>
definePageMeta({
  layout: 'custom'
})
</script>

(Chi tiết layout sẽ học ở Bài 4)

---

Tổng kết bài học

Tính năng	Cách dùng
Route /	pages/index.vue
Route /about	pages/about.vue
Route lồng /blog/post	pages/blog/post.vue
Route động /user/:id	pages/user/[id].vue
Route nhiều param	pages/product/[cat]/[slug].vue

---

Bạn đã học được

• Tạo route tự động bằng file
• Xử lý route động (params)
• Cách tổ chức thư mục cho nested route