Parametri dinamici delle route: [id]
Catturi i segmenti dell'URL come parametri utilizzando la notazione tra parentesi quadre nei nomi delle cartelle.
Parametri dinamici delle route: [id] è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Nomi di cartelle tra parentesi quadre
Utilizzi le parentesi quadre nei nomi delle cartelle per definire segmenti dinamici.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugAccesso al parametro
All'interno della pagina, utilizzi lo store $page da $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Accesso dalla funzione load
All'interno della funzione load di +page.js, utilizzi direttamente params.slug.
export function load({ params }) { return { slug: params.slug }; }Più parametri
Utilizzi più parentesi quadre per i percorsi composti da più segmenti.
src/routes/[lang]/[slug]/+page.svelteValidazione dei parametri
Restituisca un 404 da load se il parametro non è valido.
if (!isValid(params.slug)) error(404, "Not found");Matcher
Aggiunga un matcher in src/params per applicare un'espressione regolare a un parametro.
src/routes/blog/[slug=alpha]/+page.svelteDefinizione di un matcher
Crei src/params/alpha.js esportando una funzione.
export function match(value) { return /^[a-z]+$/.test(value); }SEO con gli slug
Gli slug sono generalmente ID sicuri per gli URL. Generi gli slug dai titoli per ottenere URL puliti.
Combinazione di percorsi statici e dinamici
Affianchi cartelle statiche e dinamiche; in caso di conflitto prevale quella statica.
Sicurezza dei tipi
SvelteKit genera i tipi per i parametri di ogni route, accessibili nell'argomento della funzione load.
Pre-rendering delle route dinamiche
Utilizzi entries in +page.js per enumerare i valori da pre-renderizzare.
Controllo rapido
Come si dichiarano i segmenti dinamici?
Riepilogo
Utilizzi cartelle [param] per i segmenti dinamici. Acceda ai valori tramite params in load o $page.params.
Domande Frequenti
La lezione «Parametri dinamici delle route: [id]» è gratuita?
Sì — il testo completo di «Parametri dinamici delle route: [id]» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Parametri dinamici delle route: [id]»?
Catturi i segmenti dell'URL come parametri utilizzando la notazione tra parentesi quadre nei nomi delle cartelle. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Parametri dinamici delle route: [id]»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Routing basato sui file con +page.svelte
- Parametri dinamici delle route: [id]
- Parametri opzionali e rest
- File di layout: +layout.svelte