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
Kickstart Your Career

Get certified by completing the course

Get Started