In this chapter, you will learn how to use aurelia-history plugin.

Step 1 – Install the Plugin

This plugin is already available as a part of the standard configuration. If you have set aurelia.use.standardConfiguration() as a part of a manual configuration, you are ready to go.

main.js

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

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

Step 2 – Using the History

We will use an example from the last chapter (Aurelia – Routing). If we want to set the functionality for navigating back or forward, we can use the history object with back() and forward() methods. We will add this after a router configuration.

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

Now, let”s add two buttons to our 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>

The users can navigate back and forward by clicking the buttons we added.