Parameter Rute Dinamis: [id]
Tangkap segmen URL sebagai parameter menggunakan notasi kurung siku dalam nama folder.
Parameter Rute Dinamis: [id] adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Nama Direktori dalam Kurung Siku
Gunakan tanda kurung siku dalam nama direktori untuk segmen dinamis.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugMengakses Parameter
Di dalam halaman, gunakan penyimpan $page dari $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Akses dari Fungsi Pemuatan
Di dalam fungsi pemuatan +page.js, gunakan params.slug secara langsung.
export function load({ params }) { return { slug: params.slug }; }Beberapa Parameter
Gunakan beberapa tanda kurung siku untuk jalur dengan banyak segmen.
src/routes/[lang]/[slug]/+page.svelteMemvalidasi Parameter
Kembalikan 404 dari fungsi pemuatan jika parameternya tidak valid.
if (!isValid(params.slug)) error(404, "Not found");Pencocok
Tambahkan pencocok src/params untuk memberlakukan ekspresi reguler pada parameter.
src/routes/blog/[slug=alpha]/+page.svelteMendefinisikan Pencocok
Buat src/params/alpha.js yang mengekspor sebuah fungsi.
export function match(value) { return /^[a-z]+$/.test(value); }SEO dengan Slug
Slug biasanya merupakan pengenal yang aman untuk URL. Buat slug dari judul agar URL tetap bersih.
Menggabungkan Rute Statis dan Dinamis
Tempatkan direktori statis berdampingan dengan direktori dinamis; rute statis diutamakan jika terjadi konflik.
Keamanan Tipe
SvelteKit membuat tipe untuk parameter setiap rute, yang dapat diakses di argumen fungsi pemuatan.
Prarender Rute Dinamis
Gunakan entries di +page.js untuk mencantumkan nilai yang akan diprarender.
Pemeriksaan Singkat
Bagaimana segmen dinamis dideklarasikan?
Rangkuman
Gunakan direktori [param] untuk segmen dinamis. Akses melalui params dalam fungsi pemuatan atau $page.params.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Parameter Rute Dinamis: [id]” gratis?
Ya — teks lengkap “Parameter Rute Dinamis: [id]” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Parameter Rute Dinamis: [id]”?
Tangkap segmen URL sebagai parameter menggunakan notasi kurung siku dalam nama folder. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Parameter Rute Dinamis: [id]” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Perutean Berbasis File dengan +page.svelte
- Parameter Rute Dinamis: [id]
- Parameter Opsional dan Sisa
- File Tata Letak: +layout.svelte