อัปเดตล่าสุด Feb. 19, 2024
Vue Router เป็น official library สำหรับจัดการเส้นทาง (routing) ใน Vue.js (พูดง่าย ๆ ก็คือจัดการกับ URL นั่นเองครับ) ซึ่งช่วยให้เราสร้างเว็บแอปพลิเคชันแบบ Single Page Applications (SPA) ได้อย่างมีประสิทธิภาพ ในบทเรียนนี้ เราจะพาไปความรู้จักและวิธีการใช้งาน Vue Router ร่วมกับ Vue 3 และแนะนำแนวทางปฏิบัติที่ดีที่สุดพร้อมตัวอย่างโค้ดกันครับ
เริ่มต้นด้วยการติดตั้ง Vue Router ในโปรเจค Vue
$ npm install vue-router@4
ใน 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 ไปยัง instance ของ Vue ใน src/main.js
import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')
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}