Routage fondé sur les fichiers avec +page.svelte
Associez automatiquement les chemins de fichiers sous src/routes aux chemins d’URL.
Routage fondé sur les fichiers avec +page.svelte est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Fichier = route
SvelteKit associe les dossiers situés sous src/routes aux chemins d'URL. Un fichier +page.svelte définit une route.
Page racine
src/routes/+page.svelte est rendu à l'adresse /.
Page À propos
src/routes/about/+page.svelte est rendu à l'adresse /about.
Routes imbriquées
Les dossiers peuvent être imbriqués. src/routes/blog/posts/+page.svelte est rendu à l'adresse /blog/posts.
Composant de page
Le fichier est un composant Svelte ordinaire. Utilisez toute fonctionnalité que vous avez apprise.
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>Convention de routage
Les noms de fichier commençant par + ont une signification particulière pour SvelteKit : +page, +layout, +server, etc.
Aucun import nécessaire
Vous n'enregistrez pas les routes manuellement. Le système de fichiers fait office de routeur.
Navigation programmatique
Utilisez goto depuis $app/navigation pour naviguer dans le code.
import { goto } from "$app/navigation";
goto("/about");Composant de lien
Utilisez des balises <a href> ordinaires ; SvelteKit les intercepte pour la navigation côté client.
Préchargement
Ajoutez data-sveltekit-preload-data à un lien pour précharger les données au survol.
Page 404
Créez src/routes/+error.svelte pour personnaliser la page introuvable.
Vérification rapide
Où créez-vous la route /products ?
Récapitulatif
Le système de fichiers définit les routes. Un fichier +page.svelte placé dans n'importe quel dossier sous src/routes devient une route.
Questions Fréquemment Posées
La leçon « Routage fondé sur les fichiers avec +page.svelte » est-elle gratuite ?
Oui — le texte complet de « Routage fondé sur les fichiers avec +page.svelte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Routage fondé sur les fichiers avec +page.svelte » ?
Associez automatiquement les chemins de fichiers sous src/routes aux chemins d’URL. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Routage fondé sur les fichiers avec +page.svelte » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Routage fondé sur les fichiers avec +page.svelte
- Paramètres de route dynamiques : [id]
- Paramètres facultatifs et restants
- Fichiers de mise en page : +layout.svelte