Wrikka Learn

Dark mode

Nuxt.js Routing ​

ภาพรวม ​

Nuxt ใช้ระบบไฟล์เป็นตัวกำหนดเส้นทาง (file-based routing) โดยอัตโนมัติจากไฟล์ในโฟลเดอร์ pages/

โครงสร้างไฟล์และเส้นทาง ​

bash
-| pages/
---| index.vue        # / (หน้าแรก)
---| about.vue        # /about
---| users/
-----| index.vue      # /users
-----| [id].vue       # /users/1, /users/2, ...
-----| [id]/
-------| profile.vue  # /users/1/profile

การนำทาง (Navigation) ​

ใช้คอมโพเนนต์ <NuxtLink> สำหรับการเปลี่ยนหน้าโดยไม่โหลดหน้าใหม่

vue
<template>
  <nav>
    <ul>
      <li><NuxtLink to="/">หน้าแรก</NuxtLink></li>
      <li><NuxtLink to="/about">เกี่ยวกับเรา</NuxtLink></li>
      <li><NuxtLink :to="/users/1">โปรไฟล์ผู้ใช้</NuxtLink></li>
    </ul>
  </nav>
</template>

การใช้งาน Route Parameters ​

เข้าถึงพารามิเตอร์จาก URL ด้วย useRoute()

vue
<template>
  <div>
    <h1>ผู้ใช้หมายเลข {{ $route.params.id }}</h1>
  </div>
</template>

<script setup>
const route = useRoute();
// ตัวอย่าง: เมื่อเข้าหน้า /users/123
console.log(route.params.id); // แสดง 123
</script>

Nested Routes ​

สร้างเส้นทางซ้อนด้วยโฟลเดอร์และไฟล์ index.vue

bash
-| pages/
---| users/
-----| index.vue      # /users
-----| [id].vue       # /users/1
-----| [id]/
-------| profile.vue  # /users/1/profile

Dynamic Routes ​

ใช้ [parameter] สำหรับพารามิเตอร์แบบไดนามิก

bash
-| pages/
---| products/
-----| [category]/
-------| [id].vue  # /products/electronics/123

Route Middleware ​

สร้าง middleware สำหรับตรวจสอบก่อนเข้าหน้าเว็บ

  1. สร้างไฟล์ middleware/auth.ts
typescript
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const isLoggedIn = false; // ตรวจสอบการล็อกอิน
  if (!isLoggedIn) {
    return navigateTo("/login");
  }
});
  1. ใช้งานในหน้าเว็บ
vue
<script setup>
definePageMeta({
  middleware: "auth", // ใช้ middleware ชื่อ auth
});
</script>

Route Validation ​

ตรวจสอบความถูกต้องของพารามิเตอร์

vue
<script setup>
definePageMeta({
  validate: async (route) => {
    // ตรวจสอบว่า id เป็นตัวเลขเท่านั้น
    return /^\d+$/.test(route.params.id.toString());
  },
});
</script>

ตัวอย่างการใช้งานร่วมกัน ​

vue
<template>
  <div>
    <nav>
      <NuxtLink to="/">หน้าแรก</NuxtLink>
      <NuxtLink to="/about">เกี่ยวกับ</NuxtLink>
      <NuxtLink :to="`/users/${userId}`">โปรไฟล์ของฉัน</NuxtLink>
    </nav>

    <div v-if="$route.params.id">
      <h1>ข้อมูลผู้ใช้ ID: {{ $route.params.id }}</h1>
    </div>
  </div>
</template>

<script setup>
const userId = ref(1);
</script>

สรุป ​

  • ใช้โครงสร้างโฟลเดอร์ pages/ กำหนดเส้นทางอัตโนมัติ
  • ใช้ <NuxtLink> สำหรับการนำทาง
  • ใช้ useRoute() เพื่อเข้าถึงข้อมูลเส้นทางปัจจุบัน
  • ใช้ [parameter] สำหรับพารามิเตอร์แบบไดนามิก
  • ใช้ Middleware สำหรับตรวจสอบก่อนเข้าหน้าเว็บ
  • ใช้ validate สำหรับตรวจสอบความถูกต้องของพารามิเตอร์

TIP

  • ใช้ navigateTo() สำหรับการเปลี่ยนเส้นทางแบบโปรแกรม
  • ใช้ abortNavigation() เพื่อยกเลิกการเปลี่ยนหน้า
  • ใช้ <NuxtPage> เป็นตัวแสดงเนื้อหาของหน้าใน app.vue