Aurepa - History

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

Step 1 - Install the Plugin

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

main.js

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

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

Step 2 - Using the History

We will use an example from the last chapter (Aurepa - Routing). If we want to set the functionapty 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 =  Aurepa ;
      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>
         <p repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </p>
      </ul>
   </nav>
	
   <button cpck.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button cpck.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

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