In this chapter, we will discuss how to use the 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.standard configuration() 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.
Next Topic : Click Here