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:UsersusernameDesktopaureliaAppsrc>mkdir components

Inside this folder, we will create home and about directories.

C:UsersusernameDesktopaureliaAppsrccomponents>mkdir home
C:UsersusernameDesktopaureliaAppsrccomponents>mkdir about

Inside the home folder, we need to create view and view-model files.

C:UsersusernameDesktopaureliaAppsrccomponentshome>touch home.js
C:UsersusernameDesktopaureliaAppsrccomponentshome>touch home.html

We also need view and view-model for about page.

C:UsersusernameDesktopaureliaAppsrccomponentsabout>touch about.js
C:UsersusernameDesktopaureliaAppsrccomponentsabout>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.