Vue Router

   อัปเดตล่าสุด Feb. 19, 2024

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
}




คอร์สเรียนแนะนำ

Mastering Vue.js 101

เรียนรู้การใช้งาน Vue.js ซึ่งเป็นหนึ่งใน JavaScript Front-end frameworks ท…