การตั้งค่า Vue Router
ติดตั้ง Vue Router และกำหนดเส้นทางแรกของคุณ
การตั้งค่า Vue Router เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
Vue Router คืออะไร
Vue Routerเป็นไลบรารีกำหนดเส้นทางอย่างเป็นทางการสำหรับ Vue
- จับคู่ URL กับคอมโพเนนต์
- รองรับการนำทางในแอปหน้าเดียวโดยไม่ต้องโหลดทั้งหน้าใหม่
- จัดการประวัติ ลิงก์ และพารามิเตอร์
การติดตั้ง Vue Router
เพิ่ม Vue Router ลงในโครงการด้วย npm
# Install Vue Router 4 (for Vue 3)
npm install vue-router
# Or have it added during npm create vue@latestการสร้างคอมโพเนนต์ของเส้นทาง
แต่ละเส้นทางจะแสดงผลคอมโพเนนต์หนึ่งรายการ ให้เริ่มจากคอมโพเนนต์หน้าที่เรียบง่าย
<!-- Home.vue -->
<template>
<h1>Home Page</h1>
</template>
<!-- About.vue -->
<template>
<h1>About Page</h1>
</template>การกำหนดอาร์เรย์ routes
อาร์เรย์ routesจะจับคู่เส้นทางกับคอมโพเนนต์
import Home from "./views/Home.vue"
import About from "./views/About.vue"
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About }
]createRouter
ฟังก์ชันcreateRouterจะสร้างเราเตอร์จากเส้นทางและโหมดประวัติ
import { createRouter, createWebHistory } from "vue-router"
const router = createRouter({
history: createWebHistory(),
routes
})
export default routercreateWebHistory
createWebHistoryใช้ API ประวัติของ HTML5 เพื่อสร้าง URL ที่อ่านง่าย เช่น /about
- ไม่มีเครื่องหมายแฮชใน URL
- ต้องกำหนดค่าเซิร์ฟเวอร์เพื่อให้ลิงก์ไปยังหน้าที่ซ้อนอยู่ทำงานได้
- ทางเลือกคือ createWebHashHistory (/#/about)
การลงทะเบียนเราเตอร์
ติดตั้งเราเตอร์ลงในแอปด้วย app.use
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
createApp(App)
.use(router)
.mount("#app")ส่วนแสดงผลของเราเตอร์
คอมโพเนนต์ส่วนแสดงผลของเราเตอร์คือบริเวณที่คอมโพเนนต์ของเส้นทางที่ตรงกันจะแสดงผล
<!-- App.vue -->
<template>
<nav>...</nav>
<router-view></router-view>
</template>
<!-- The current page renders here -->ลิงก์ของเราเตอร์
ใช้ลิงก์ของเราเตอร์แท็กจุดยึดแบบปกติสำหรับการนำทาง เพราะไม่ต้องโหลดทั้งหน้าใหม่
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>การจัดรูปแบบลิงก์ที่ใช้งานอยู่
ลิงก์ของเราเตอร์จะเพิ่มคลาส CSS ให้ลิงก์ที่กำลังใช้งานโดยอัตโนมัติ
- ลิงก์ของเราเตอร์ที่ใช้งานอยู่สำหรับการจับคู่บางส่วน
- ลิงก์ของเราเตอร์ที่ใช้งานอยู่แบบตรงทั้งหมดสำหรับการจับคู่ที่ตรงกันทั้งหมด
จัดรูปแบบคลาสเหล่านี้เพื่อเน้นหน้าปัจจุบัน
นำทุกอย่างมาประกอบกัน
ลำดับการทำงานทั้งหมดมีดังนี้
- กำหนดเส้นทางที่จับคู่เส้นทางกับคอมโพเนนต์
- สร้างเราเตอร์ด้วย createRouter และ createWebHistory
- ลงทะเบียนด้วย app.use(router)
- วางส่วนแสดงผลของเราเตอร์และนำทางด้วยลิงก์ของเราเตอร์
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการตั้งค่า Vue Router
ทบทวน: การตั้งค่า Vue Router
คุณได้ตั้งค่าการกำหนดเส้นทางฝั่งไคลเอ็นต์แล้ว
- ติดตั้งด้วย npm install vue-router
- กำหนดอาร์เรย์ routes
- ใช้ createRouter ร่วมกับ createWebHistory
- ลงทะเบียนผ่าน app.use(router)
- ใช้ส่วนแสดงผลของเราเตอร์และลิงก์ของเราเตอร์
ถัดไป: เส้นทางที่ซ้อนกันและเส้นทางแบบไดนามิก
คำถามที่พบบ่อย
บทเรียน “การตั้งค่า Vue Router” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่า Vue Router” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Vue Router”
ติดตั้ง Vue Router และกำหนดเส้นทางแรกของคุณ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “การตั้งค่า Vue Router” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Vue Router
- เส้นทางซ้อนและเส้นทางแบบไดนามิก
- ตัวป้องกันการนำทาง