Nuxt.js Fundamental ตอนที่ 3 - การกำหนด Routing

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

ก่อนหน้านี้ใน ตอนที่ 1 เราจะเห็นได้ว่า เราสามารถสร้างหน้า Pages ง่ายๆ ด้วยการสร้างไฟล์ *.vue ไว้ในโฟลเดอร์ pages เท่านั้น ก็ได้หน้าใหม่แล้ว

โดยปกติถ้าเราเขียน Vue.js ธรรมดา เราก็จะใช้ vue-router กันใช่มั้ยครับ และก็มีไฟล์ router.js ตัวนึง ในการจัดการ routes ทั้งหมดใน Application ของเรา

แต่ใน Nuxt.js มันจะ auto generate ตัว Vue Router ให้เราเลย เช่น ถ้าไฟล์ในโฟลเดอร์ pages เรามีประมาณนี้

pages/
  --| auth/
  -----| login.vue
  -----| register.vue
  --| index.vue
  --| dashboard.vue

ตัว Nuxt.js มันก็จะ Generate Router ให้เราเป็นแบบนี้เลย

1
router: {
2
  routes: [
3
    {
4
      name: 'index',
5
      path: '/',
6
      component: 'pages/index.vue'
7
    },
8
    {
9
      name: 'dashboard',
10
      path: '/dashboard',
11
      component: 'pages/dashboard.vue'
12
    },
13
    {
14
      name: 'auth-login',
15
      path: '/auth/login',
16
      component: 'pages/auth/index.vue'
17
    },
18
    {
19
      name: 'auth-register',
20
      path: '/auth/register',
21
      component: 'pages/auth/one.vue'
22
    }
23
  ]
24
}

Dynamic Routes

นอกจากการ generate route แบบ static page แล้ว ตัว Nuxt.js ก็รองรับการ auto generate เป็นแบบ Dynamic Route ด้วยนะครับ

โดยการใส่ underscore (_) ข้างหน้าชื่อไฟล์ *.vue หรือชื่อ folder ของเราครับ เช่น เรามีไฟล์แบบนี้

pages/
--| _posts/
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

ตัว Nuxt.js ก็จะ generate ให้เราเป็นแบบนี้ครับ

1
router: {
2
  routes: [
3
    {
4
      name: 'index',
5
      path: '/',
6
      component: 'pages/index.vue'
7
    },
8
    {
9
      name: 'users-id',
10
      path: '/users/:id?',
11
      component: 'pages/users/_id.vue'
12
    },
13
    {
14
      name: 'slug',
15
      path: '/posts/:slug',
16
      component: 'pages/posts/_slug/index.vue'
17
    }
18
  ]
19
}

สิ่งที่เพื่อนๆ จะเห็นความแตกต่างคือ ตรง users-id ทำให้ path เป็น /users/:id? ซึ่งเป็น optional ครับ ถ้าเราจะให้มันเป็น required เลย เราต้องสร้าง /users/_id ให้เป็น folder ครับ แล้วข้างในมีไฟล์ index.vue ครับ

ข้อสังเกตง่ายๆ

• Optional - ใช้ underscore ข้างหน้าชื่อไฟล์
• Required - ใช้ underscore ข้างหน้าชื่อโฟลเดอร์ และข้างในมีไฟล์ index.vue ครับ

Navigation

การ Navigate ระหว่าง Page เราจะใช้ component ชื่อ NuxtLink ครับ (เหมือนกับการใช้ <RouterLink> ใน Vue.js ปกติเลยครับ)

โดย syntac ก็จะเหมือน HTML tag <a> เลยครับ เพียงแค่เปลี่ยนจาก href="" เป็น to="" เท่านั้น เช่น

1
<template>
2
  <NuxtLink to="/">Home page</NuxtLink>
3
</template>

เราใช้ <NuxtLink to="/another-page"> กรณีที่เราต้องการเปลี่ยนหน้าระหว่าง Page ของเว็บเรา แต่ถ้าเป็นเว็บภายนอก เราก็ใช้ <a> ปกติครับ

Route Params

ใน Nuxt.js เราสามารถที่จะเข้าถึงค่า params จาก Dynamic Router โดยใช้

1
this.$route.params.<NAME>
2

3
// เช่น
4
this.$route.params.id

สังเกตว่า $route.params.id ไม่ต้องมี underscore (_) เหมือนชื่อไฟล์ หรือ folder นะครับ

และเราสามารถที่จะ validate เพื่อดังค่า หรือใส่ logic ได้ ด้วย function ที่ชื่อว่า validate() ดังนี้ครับ

1
export default { validate({ params }) { // Must be a number return /^\d+$/.test(params.id) } }

หาก ค่าใน validate ไม่ได้คืนค่าเป็น true หรือ Promise.resolve(true) ตัว Nuxt.js จะทำการโหลดหน้า 404 Page ให้อัตโนมัติครับ

ตัว validate() จะ execute 1 ครั้ง ฝั่ง server side และ client side กรณีที่ navigate มาที่หน้า route ที่เรากำหนด

อ่านเพิ่มเติม

• Nuxt.js Routing

Hints & Questions?

• เพื่อนๆลองส่งค่า <nuxt-link to="/"> ที่มากกว่าแค่ string ลองส่งเป็น Object ดูครับ ว่าทำอะไรได้บ้าง?
• ลองประยุกค์ใช้ validate() ว่ามันมีประโยชน์ยังไง?
• ทำ Routing แบบ nested route ซ้อนกัน มี parent มี child ได้มั้ยนะ?
• ใน route เราอยากกำหนดพวกค่า เช่น meta: {requiredAuth: true} แบบ Vuex Router ได้มั้ย?

อ่านบทถัดไป 👉 ตอนที่ 4 - Nuxt.js Concept