การนำทางด้วยโปรแกรมและ useRouter
คอมโพสิเบิล router.push(), router.replace(), router.go(), useRouter() และ useRoute()
การนำทางด้วยโปรแกรมและ useRouter เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การนำทางจากโค้ด
นอกจาก RouterLink แล้ว คุณมักต้องนำทางจาก JavaScript เช่น หลังส่งแบบฟอร์มหรือเข้าสู่ระบบ composable useRouter ช่วยให้คุณได้อินสแตนซ์ของเราเตอร์เพื่อทำสิ่งนี้
การรับเราเตอร์
เรียก useRouter() ภายใน <script setup> ออบเจ็กต์ที่ส่งคืนจะเปิดให้ใช้ push, replace, go และอื่น ๆ
import { useRouter } from 'vue-router'
const router = useRouter()การนำทางด้วย push
router.push จะเพิ่มรายการลงในสแต็กประวัติ เหมือนกับการคลิกลิงก์ รูปแบบที่ง่ายที่สุดรับสตริงพาธ
router.push('/dashboard')การใช้ push กับออบเจ็กต์เส้นทาง
คุณยังสามารถส่งออบเจ็กต์ที่มี name, params และ query ได้ เส้นทางที่มีชื่อช่วยหลีกเลี่ยงการเขียนพาธแบบตายตัว
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace: ไม่เพิ่มรายการประวัติ
router.replace จะนำทางโดยไม่เพิ่มรายการลงในประวัติ ดังนั้นปุ่มย้อนกลับจะข้ามหน้านี้ไป ใช้หลังเข้าสู่ระบบเพื่อไม่ให้ผู้ใช้ย้อนกลับไปยังหน้าเข้าสู่ระบบได้
router.replace('/dashboard')การย้อนกลับและไปข้างหน้า
router.go(n) จะเลื่อนผ่านประวัติตามจำนวน n ขั้น router.go(-1) ย้อนกลับหนึ่งหน้า ส่วน router.go(1) ไปข้างหน้าหนึ่งหน้า
function goBack() {
router.go(-1)
}หลังการทำงานแบบอะซิงโครนัส
ลำดับการทำงานทั่วไปคือ ส่งแบบฟอร์ม รอผลลัพธ์ แล้วจึงนำทาง push จะส่งคืน Promise ที่คุณสามารถใช้ await เพื่อรอให้เสร็จสมบูรณ์
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}การอ่านเส้นทางปัจจุบัน
หากต้องการอ่านพารามิเตอร์และ query ของเส้นทางปัจจุบัน ให้ใช้ composable useRoute อย่าสับสนกับ useRouter — useRoute คือเส้นทาง ส่วน useRouter คือตัวนำทาง
import { useRoute } from 'vue-router'
const route = useRoute()การเข้าถึงพารามิเตอร์
อ่านส่วนแบบไดนามิกผ่าน route.params สำหรับเส้นทาง /user/:id ค่า id จะอยู่ที่ route.params.id
const userId = route.params.idการเข้าถึงสตริง query
อ่านสตริง query ผ่าน route.query สำหรับ ?tab=profile ให้ใช้ route.query.tab
const tab = route.query.tabการตอบสนองต่อการเปลี่ยนพารามิเตอร์
เนื่องจาก route เป็นข้อมูลที่ตอบสนองต่อการเปลี่ยนแปลง ให้เฝ้าดูค่าเพื่อรับมือเมื่อพารามิเตอร์เปลี่ยนขณะที่ยังอยู่ในคอมโพเนนต์เดิม
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับการนำทางด้วยโค้ด
บทสรุป
คุณได้เรียนรู้การนำทางด้วยโค้ดดังนี้
- useRouter() มอบ push, replace และ go ให้ใช้งาน
- push เพิ่มประวัติ replace ไม่เพิ่ม และ go(-1) ใช้ย้อนกลับ
- push รับสตริงพาธหรือออบเจ็กต์ { name, params, query }
- useRoute() อ่าน params และ query ปัจจุบัน และตอบสนองต่อการเปลี่ยนแปลง
คำถามที่พบบ่อย
บทเรียน “การนำทางด้วยโปรแกรมและ useRouter” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การนำทางด้วยโปรแกรมและ useRouter” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การนำทางด้วยโปรแกรมและ useRouter”
คอมโพสิเบิล router.push(), router.replace(), router.go(), useRouter() และ useRoute() คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การนำทางด้วยโปรแกรมและ useRouter” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟิลด์เมทาของเส้นทางและการกำหนดชนิด
- การเปลี่ยนเส้นทางและแอนิเมชัน
- การกำหนดค่าพฤติกรรมการเลื่อน
- การนำทางด้วยโปรแกรมและ useRouter