CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

Utiliser Svelte SPA Router pour les applications monopages

Retour à la formation
Chapitre 9 Leçon 2
Précédent
Suivant

Introduction au routage pour les applications SPA en utilisant le Svelte SPA Router. Apprenez à configurer et utiliser ce routeur optimisé pour les applications monopages.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous nous concentrons sur l'utilisation de Svelte SPA Router, un outil particulièrement optimisé pour les applications SPA (Single Page Applications). Ce routeur utilise le routage basé sur le hachage, éliminant le besoin de traitement côté serveur. Vous apprendrez à ajouter le support de Svelte SPA Router à un projet en exécutant des commandes npm spécifiques.

Nous allons définir quatre composants principaux dans cette application : App.svelte, Racine.svelte, Page1.svelte, et Page2.svelte. Vous verrez comment créer ces composants dans Visual Studio Code, puis les associer à des routes spécifiques pour naviguer entre les différentes pages.

La leçon se termine par la visualisation du fonctionnement du routeur dans un environnement de développement, démontrant le changement de contenu en fonction des URL spécifiques. La leçon suivante portera sur le passage de paramètres dans l'URL.

Objectifs de cette leçon

A la fin de cette vidéo, vous saurez :

  • Ajouter et configurer Svelte SPA Router dans un projet Svelte
  • Créer des composants de page basiques
  • Configurer le routage entre ces composants
  • Comprendre le fonctionnement du routage basé sur le hachage

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :

  • Avoir des connaissances de base en HTML, CSS et JavaScript
  • Connaître les concepts de base des applications monopages (SPA)
  • Être familier avec les commandes npm et la structure d'un projet Svelte

Métiers concernés

Les métiers concernés par cette compétence incluent :

  • Développeur Front-End
  • Développeur Full Stack
  • Développeur Web
  • Ingénieur Logiciel

Alternatives et ressources

Comme alternatives à Svelte SPA Router, vous pouvez considérer :

  • React Router pour les projets en React
  • Vue Router pour les projets en Vue.js
  • Angular Router pour les projets en Angular

Questions & Réponses

La commande npm pour ajouter Svelte SPA Router à un projet est npm add svelte-spa-router.
Pour définir une route dans Svelte SPA Router, vous utilisez le composant Router et spécifiez les routes et leurs composants associés à l'aide de l'attribut routes.
Svelte SPA Router utilise le routage basé sur le hachage, ce qui signifie que les changements de route sont gérés par le fragment d'URL après le #.