พารามิเตอร์เส้นทางแบบไดนามิก: [id]
จับส่วนของ URL เป็นพารามิเตอร์โดยใช้สัญลักษณ์วงเล็บในชื่อโฟลเดอร์
พารามิเตอร์เส้นทางแบบไดนามิก: [id] เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชื่อโฟลเดอร์ในวงเล็บเหลี่ยม
ใช้วงเล็บเหลี่ยมในชื่อโฟลเดอร์สำหรับส่วนเส้นทางแบบไดนามิก
src/routes/blog/[slug]/+page.svelte -> /blog/:slugการเข้าถึงพารามิเตอร์
ภายในหน้า ให้ใช้สโตร์ $page จาก $app/stores
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>การเข้าถึงจากฟังก์ชันโหลด
ภายในฟังก์ชันโหลดของ +page.js ให้ใช้ params.slug ได้โดยตรง
export function load({ params }) { return { slug: params.slug }; }พารามิเตอร์หลายตัว
ใช้วงเล็บหลายชุดสำหรับเส้นทางที่มีหลายส่วน
src/routes/[lang]/[slug]/+page.svelteการตรวจสอบพารามิเตอร์
ส่งคืน 404 จากฟังก์ชันโหลดหากพารามิเตอร์ไม่ถูกต้อง
if (!isValid(params.slug)) error(404, "Not found");ตัวจับคู่
เพิ่มตัวจับคู่ใน src/params เพื่อบังคับใช้นิพจน์ปกติกับพารามิเตอร์
src/routes/blog/[slug=alpha]/+page.svelteการกำหนดตัวจับคู่
สร้าง src/params/alpha.js ที่ส่งออกฟังก์ชัน
export function match(value) { return /^[a-z]+$/.test(value); }SEO ด้วยตัวระบุเส้นทาง
ตัวระบุเส้นทางมักเป็นรหัสที่ปลอดภัยสำหรับ URL สร้างตัวระบุจากชื่อเรื่องเพื่อให้ได้ URL ที่อ่านง่าย
การรวมแบบคงที่และแบบไดนามิก
วางโฟลเดอร์แบบคงที่ไว้ข้างโฟลเดอร์แบบไดนามิกได้ โดยโฟลเดอร์แบบคงที่จะมีลำดับความสำคัญเมื่อขัดแย้งกัน
ความปลอดภัยของชนิดข้อมูล
SvelteKit จะสร้างชนิดข้อมูลสำหรับพารามิเตอร์ของแต่ละเส้นทาง ซึ่งเข้าถึงได้จากอาร์กิวเมนต์ของฟังก์ชันโหลด
การแสดงผลเส้นทางไดนามิกล่วงหน้า
ใช้ entries ใน +page.js เพื่อแจกแจงค่าที่ต้องการแสดงผลล่วงหน้า
ตรวจสอบความเข้าใจ
ประกาศส่วนเส้นทางแบบไดนามิกอย่างไร
สรุปทบทวน
ใช้โฟลเดอร์ [param] สำหรับส่วนเส้นทางแบบไดนามิก เข้าถึงได้ผ่าน params ในฟังก์ชันโหลด หรือผ่าน $page.params
คำถามที่พบบ่อย
บทเรียน “พารามิเตอร์เส้นทางแบบไดนามิก: [id]” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พารามิเตอร์เส้นทางแบบไดนามิก: [id]” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พารามิเตอร์เส้นทางแบบไดนามิก: [id]”
จับส่วนของ URL เป็นพารามิเตอร์โดยใช้สัญลักษณ์วงเล็บในชื่อโฟลเดอร์ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “พารามิเตอร์เส้นทางแบบไดนามิก: [id]” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte
- พารามิเตอร์เส้นทางแบบไดนามิก: [id]
- พารามิเตอร์เสริมและพารามิเตอร์ส่วนที่เหลือ
- ไฟล์โครงร่าง: +layout.svelte