Aurelia - Histoire

Dans ce chapitre, vous apprendrez à utiliser aurelia-history brancher.

Étape 1 - Installez le plugin

Ce plugin est déjà disponible dans le cadre de la configuration standard. Si vous avez définiaurelia.use.standardConfiguration() dans le cadre d'une configuration manuelle, vous êtes prêt à partir.

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

Étape 2 - Utilisation de l'historique

Nous utiliserons un exemple du dernier chapitre (Aurelia - Routing). Si nous voulons définir la fonctionnalité de navigation en arrière ou en avant, nous pouvons utiliser lehistory objet avec back() et forward()méthodes. Nous ajouterons ceci après une configuration de routeur.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './pages/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',    
            moduleId: './pages/about/about',    nav: true, title:'About' }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
	goForward() {
      history.forward();
   }
}

Maintenant, ajoutons deux boutons à notre view.

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>
	
   <button click.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button click.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

Les utilisateurs peuvent naviguer en arrière et en avant en cliquant sur les boutons que nous avons ajoutés.