Comment passer d’une page à une autre dans le cadre d’une application “Single Page App” (SPA)? Réponse dans cet article.

Introduction

Après avoir réalisée une première page et intégré SASS pour personnaliser Bulma, on va s’intéresser au changement de page.

Concept

Dans une application de type SPA (pour Single Page Application), la notion de pages est caduque et donc le changement également. Dès lors, une application Web à une page ne sert pas à grand chose. C’est ici qu’intervient le concept de routage: c’est la possibilité de changer le contenu de la page sans changer de page et sans faire d’appel côté serveur.

Mise en œuvre de la magie

Dans mon projet, après avoir testé plusieurs routeurs, j’ai finalement opté pour Svelte Routing. Cette librairie possède l’énorme avantage de ne pas intercepter tous les appels HTTP. Elle laisse passer toutes les urls qui ne sont pas déclarées, ce qui facilite énormément l’intégration avec le backend.

Pour installer cette librairie de routage, comme d’habitude, il faut passer par la case NPM:

    
1npm install --save svelte-routing

Définir les routes

Inclusion des composants

Avant de pouvoir définir les routes, il faut inclure les composants (ou les pages) à afficher. Ici, dans la page principale (GedMain.svelte), on importe deux composants: Home (la page d’accueil) et Login (la page de connexion).

    
1<script>
2    import { Router, Link, Route } from 'svelte-routing';
3    import Home from 'Home.svelte';
4    import Login from 'Login.svelte';
5
6    export let gedMainUrl = "";
7</script>

Ensuite, on peut définir les routes, c’est à dire quel composant sera affiché pour une url donnée:

    
1<Router url="{gedMainUrl}">
2  <div>
3    <Route path="/"><Home /></Route>
4    <Route path="login"><Login /></Route>
5  </div>
6</Router>

Pour l’url “/”, on veut afficher la page d’accueil (via le composant Home) et pour “/login”, on va présenter la page de connexion (via le composant Login).

Changer de route

Dans la page Home.svelte, on va ajouter un lien vers la page connexion et deux options sont possibles: soit on utilise une balise soit on utilise une balise

Il faut inclure le composant “Link” puis ajouter une balise comme ceci:

    
1<script>
2    import { Link } from "svelte-routing";
3</script>
4
5<Link to="/login">Connexion</Link>

Lors du clic sur le lien, le routeur reconnaît l’url “/login” et remplace le composant “Home” par “Login”.

Avec une balise

Ici, c’est le même principe que précédemment mais on va augmenter la balise d’une nouvelle option: “use-link”.

    
1<script>
2    import { link } from "svelte-routing";
3</script>
4
5<a href="/login" use:link>Connexion</a>

Le fonctionnement est identique que celui fournit par la balise . Je préfère cette version car on conserve un code HTML plus habituel.

Conclusion

Svelte propose une librairie simple permettant de gérer le changement de composants au sein d’une application “SPA”.