Aurelia - History


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.


export function configure(aurelia) {

   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.


export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';[
         { 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() {
   goForward() {

Now, let's add two buttons to our view.


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

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

Aurelia History Example