Vue Router

Vue Router เป็น official library สำหรับจัดการเส้นทาง (routing) ใน Vue.js (พูดง่าย ๆ ก็คือจัดการกับ URL นั่นเองครับ) ซึ่งช่วยให้เราสร้างเว็บแอปพลิเคชันแบบ Single Page Applications (SPA) ได้อย่างมีประสิทธิภาพ ในบทเรียนนี้ เราจะพาไปความรู้จักและวิธีการใช้งาน Vue Router ร่วมกับ Vue 3 และแนะนำแนวทางปฏิบัติที่ดีที่สุดพร้อมตัวอย่างโค้ดกันครับ

การติดตั้ง Vue Router

เริ่มต้นด้วยการติดตั้ง Vue Router ในโปรเจค Vue

$ npm install vue-router@4

การตั้งค่า Vue Router

ใน src/router/index.js (หรือ .ts ถ้าใช้ TypeScript), ทำการสร้างตัวอย่าง Router และกำหนด routes

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

การใช้งาน Vue Router ในแอป Vue

เพิ่ม Vue Router ไปยัง instance ของ Vue ใน src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Vue Router

1. การใช้งาน Lazy Loading กับ Routes

Lazy loading ช่วยให้สามารถโหลด component ของหน้าเว็บเมื่อจำเป็นจริง ๆ เท่านั้น ซึ่งช่วยลดเวลาโหลดหน้าเว็บ

const About = () => import('../views/About.vue')

const routes = [
  // โค้ดสำหรับ route อื่นๆ
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

2. การใช้งาน Named Routes

การใช้งาน named routes ทำให้สามารถอ้างอิงถึง route ได้โดยไม่ต้องใช้ URL โดยตรง ทำให้โค้ดของเราอ่านง่ายและจัดการได้ง่ายขึ้น

router.push({ name: 'About' })

3. การใช้งาน Route Guards

Route guards ใช้สำหรับการควบคุมการเข้าถึง route ต่างๆ สามารถใช้เพื่อการตรวจสอบ authentication หรือ authorization

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

4. การจัดการ 404 Pages

จัดการกับ routes ที่ไม่มีอยู่จริงด้วยการเพิ่ม route สำหรับ 404 Page

{
  path: '/:catchAll(.*)',
  name: 'NotFound',
  component: NotFound
}