Aurelia - Routing

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.




export class Home {}




export class About {}

Step 3 - Router

We will create view-model for router inside app.js file.


export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';[
         { 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.


         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>

When we run the app, we will can change the routes by clicking home or about links.

Aurelia Routing Example
Kickstart Your Career

Get certified by completing the course

Get Started