Aurelia Routing

In the last tutorial, we tackle Binding Behaviors. In this tutorial we will discuss Aurelia Routing.

Aurelia framework needs routing for its applications. So you could say that it is one of the most important part of an app. To use Aurelia’s router, the component view must have a <router-view></router-view> element. And to configure it, the component’s view-model should have configureRouter() function.

Things to know:

  • On single route configuration, call mapRoute()
  • config.map() adds more route(s) to a router. Properties other than route, name, moduleId, href can be included in a route. You can name each class as RouteConfig.
  • Route is the pattern to mirror the incoming URL fragments. It can be a string, or an array of strings. This route can also contain parameters as well.
  • Href is an optional property with conditions. In case a router does not know how to fill out parameterized portions of a pattern, then href is required.
  • Nav is a boolean or number property. Creating dynamic menu or elements are made easier. When set to true, the route will be added in the router’s navigation model. On the other hand, when specified as a number, it will sort out the value.

Create the components folder inside the src folder  if you haven’t done it already.

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 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

Next thing we need is 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 {}

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 routes by clicking home or about links.

On the next article, we will discuss Events.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.