Aurelia - Routage

Le routage est une partie importante de chaque application. Dans ce chapitre, vous apprendrez à utiliser le routeur dans le framework Aurelia.

Étape 1 - Créer des pages

Nous avons déjà créé un dossier de composants dans l'un des anciens chapitres. Si vous ne l'avez pas déjà créé, vous devez le placer dans lesrc dossier.

C:\Users\username\Desktop\aureliaApp\src>mkdir components

Dans ce dossier, nous allons créer home et about répertoires.

C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about

À l'intérieur de home dossier, nous devons créer view et view-model des dossiers.

C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html

Nous avons aussi besoin de view et view-model pour about page.

C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html

Note - Vous pouvez également créer manuellement tous les dossiers ci-dessus.

Étape 2 - Pages

Ensuite, nous devons ajouter du code par défaut aux fichiers que nous avons créés.

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

about.js

export class About {}

Étape 3 - Routeur

Nous allons créer view-model pour router à l'intérieur app.js fichier.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
		
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './components/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './components/about/about',    nav: true, title:'About' }
      ]);

      this.router = router;
   }
}

Notre routeur view sera placé dans app.html.

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

Lorsque nous exécutons l'application, nous pouvons modifier les itinéraires en cliquant sur home ou sur les liens.