In this guide we will discuss about Routing of Aurelia. Routing is an important part of every application. In this chapter, you will learn how to use the router in Aurelia framework.
Step 1 – Create Pages
We have already created a components folder in one of the former chapters. If you don’t have it created already, you should place it inside the src folder.
C:\Users\username\Desktop\aureliaApp\src>mkdir components
Inside this folder, we will create home and about directories.
C:\Users\username\Desktop\aureliaApp\src\components>mkdir home C:\Users\username\Desktop\aureliaApp\src\components>mkdir about
Inside the home folder, we need to create view and view-model files.
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html
We also need view and view-model for about page.
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html
Note − You can also create all the above folders manually.
Step 2 – Pages
Next, we need to add some default code to the files we created.
home.html
<template> <h1>HOME</h1> </template>
home.js
export class Home {}
about.html
<template> <h1>ABOUT</h1> </template>
about.js
export class About {}
Step 3 – Router
We will create view-model for router inside app.js file.
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['','home'], name: 'home',
moduleId: './components/home/home', nav: true, title:'Home' },
{ route: 'about', name: 'about',
moduleId: './components/about/about', nav: true, title:'About' }
]);
this.router = router;
}
}
Our router view will be placed in app.html.
app.html
<template>
<nav>
<ul>
<li repeat.for = "row of router.navigation">
<a href.bind = "row.href">${row.title}</a>
</li>
</ul>
</nav>
<router-view></router-view>
</template>
When we run the app, we will can change the routes by clicking home or about links.
Next Topic : Click Here