Aurelia - Historia

En este capítulo, aprenderá a utilizar aurelia-history enchufar.

Paso 1: instale el complemento

Este complemento ya está disponible como parte de la configuración estándar. Si ha establecidoaurelia.use.standardConfiguration() como parte de una configuración manual, está listo para comenzar.

main.js

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

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

Paso 2: uso del historial

Usaremos un ejemplo del último capítulo (Aurelia - Routing). Si queremos configurar la funcionalidad para navegar hacia atrás o hacia adelante, podemos usar lahistory objeto con back() y forward()métodos. Agregaremos esto después de la configuración del enrutador.

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();
   }
}

Ahora, agreguemos dos botones a nuestro 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>

Los usuarios pueden navegar hacia atrás y hacia adelante haciendo clic en los botones que agregamos.