BÀI 5: CHUYỂN TRANG VỚI VÀ ĐIỀU HƯỚNG

Chúng ta cùng đến với Bài 5 – Navigation & Chuyển trang trong NuxtJS. Đây là một phần thiết yếu giúp bạn xây dựng menu, chuyển trang mượt mà và tạo trải nghiệm như SPA (Single Page App).

---

1. Sử dụng <NuxtLink /> thay cho <a>

Trong Nuxt, để chuyển trang nội bộ (internal routing), bạn nên dùng <NuxtLink> thay vì <a> để không bị reload toàn trang.

Ví dụ:

📋 Copy<template>
  <nav>
    <NuxtLink to="/">Trang chủ</NuxtLink> |
    <NuxtLink to="/about">Giới thiệu</NuxtLink>
  </nav>
</template>

Ưu điểm của NuxtLink

• Không reload trang
• Giữ lại trạng thái app
• Tối ưu SEO và hiệu năng

---

2. Dùng route hiện tại để highlight menu

📋 Copy<script setup>
const route = useRoute()
</script>

<template>
  <NuxtLink
    to="/about"
    :class="{ active: route.path === '/about' }"
  >Giới thiệu</NuxtLink>
</template>

<style scoped>
.active {
  font-weight: bold;
  color: #42b983;
}
</style>

---

3. Điều hướng bằng useRouter()

Bạn có thể chuyển trang trong JavaScript bằng cách dùng router:

📋 Copy<script setup>
const router = useRouter()

function goToHome() {
  router.push('/')
}
</script>

<template>
  <button @click="goToHome">Về trang chủ</button>
</template>

---

4. Chuyển hướng (Redirect) sau khi login

📋 Copy<script setup>
const router = useRouter()

async function login() {
  // ... gọi API
  const success = true
  if (success) {
    router.push('/dashboard')
  }
}
</script>

---

5. Điều hướng bằng navigateTo() (Nuxt 3 style)

📋 Copy<script setup>
function toHome() {
  navigateTo('/')
}
</script>

<template>
  <button @click="toHome">Về trang chủ</button>
</template>

navigateTo() hỗ trợ thêm nhiều config nâng cao (redirect, replace, preserve scroll…)

---

6. Cấu hình chuyển hướng mặc định (redirect route)

Dùng definePageMeta() để tự redirect:

📋 Copy<script setup>
definePageMeta({
  redirect: '/dashboard'
})
</script>

---

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

• Dùng <NuxtLink> để chuyển trang nội bộ
• Dùng useRoute() để lấy route hiện tại
• Dùng useRouter() hoặc navigateTo() để chuyển trang thủ công
• Cấu hình redirect mặc định trong trang

---

Bài tập mở rộng

1. Tạo một menu gồm 3 trang: Home, About, Contact
2. Active menu theo route hiện tại
3. Tạo button “Đăng xuất” → redirect về trang login