การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte
จับคู่เส้นทางไฟล์ใต้ src/routes กับเส้นทาง URL โดยอัตโนมัติ
การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไฟล์ = เส้นทาง
SvelteKit จะแมปโฟลเดอร์ภายใต้ src/routes กับเส้นทาง URL ไฟล์ +page.svelte จะกำหนดเส้นทางหนึ่งเส้นทาง
หน้าแรก
src/routes/+page.svelte จะแสดงผลที่ /
หน้าเกี่ยวกับ
src/routes/about/+page.svelte จะแสดงผลที่ /about
เส้นทางซ้อนกัน
โฟลเดอร์สามารถซ้อนกันได้ src/routes/blog/posts/+page.svelte จะแสดงผลที่ /blog/posts
คอมโพเนนต์หน้า
ไฟล์นี้เป็นคอมโพเนนต์ Svelte ทั่วไป ใช้ฟีเจอร์ใด ๆ ที่คุณเรียนรู้มาได้
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>รูปแบบการกำหนดเส้นทาง
ชื่อไฟล์ที่ขึ้นต้นด้วย + มีความหมายพิเศษสำหรับ SvelteKit เช่น +page, +layout, +server และอื่น ๆ
ไม่ต้องนำเข้า
คุณไม่ต้องลงทะเบียนเส้นทางด้วยตนเอง ระบบไฟล์คือตัวจัดการเส้นทาง
การนำทางด้วยโค้ด
ใช้ goto จาก $app/navigation เพื่อนำทางในโค้ด
import { goto } from "$app/navigation";
goto("/about");คอมโพเนนต์ลิงก์
ใช้แท็ก <a href> ธรรมดา SvelteKit จะดักจับแท็กเหล่านี้เพื่อการนำทางฝั่งไคลเอนต์
การดึงข้อมูลล่วงหน้า
ใช้ data-sveltekit-preload-data กับลิงก์เพื่อดึงข้อมูลล่วงหน้าเมื่อวางเมาส์เหนือ
หน้า 404
สร้าง src/routes/+error.svelte เพื่อปรับแต่งหน้าที่ไม่พบ
ตรวจสอบความเข้าใจ
คุณสร้างเส้นทาง /products ที่ใด
สรุปทบทวน
ระบบไฟล์เป็นตัวกำหนดเส้นทาง +page.svelte ในโฟลเดอร์ใด ๆ ภายใต้ src/routes จะกลายเป็นเส้นทางหนึ่ง
คำถามที่พบบ่อย
บทเรียน “การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte”
จับคู่เส้นทางไฟล์ใต้ src/routes กับเส้นทาง URL โดยอัตโนมัติ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte
- พารามิเตอร์เส้นทางแบบไดนามิก: [id]
- พารามิเตอร์เสริมและพารามิเตอร์ส่วนที่เหลือ
- ไฟล์โครงร่าง: +layout.svelte