Configuring Aurelia Router and Its Basics

Routing is necessary for users to navigate through the whole web site. To make SPA project routing in frontend is must. Configure aurelia router in a aurelia project is pretty easy. First Create a fresh project using aurelia-cli. Check out this post how to do that.

To configure router we need to add configureRouter method in app.js file. See this code below.

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = "Aurelia Router";
    config.map([
     {
       route: ["", "home"],
       name: "home",
       moduleId: PLATFORM.moduleName("home")
     },
     {
       route: "user/:id",
       name: "user",
       moduleId: PLATFORM.moduleName("user")
     },     {
       route: "about",
       name: "about",
       moduleId: PLATFORM.moduleName("about")
     },
     {
       route: "contact",
       name: "contact",
       moduleId: PLATFORM.moduleName("contact")
     },
    ]);
  }
}

We will create 4 pages Home, User , About and Contact Page. For each page there will be 2 files with the same name one will be .js and the other will be .html. So we need 8 files for these 4 pages. File contents will be as follows

home.js

export class Home {}

home.html

<template>
  <h1>Home Page</h1>
</template>

user.js

export class User {
  userId = '';
  activate(data){
    this.userId = data.id;
  }
}

Here we define active method which will be called and data object will contain route parameters value as an object.

user.html

<template>
  <h1>User Page</h1>
  <p>User ID ${userId}</p>
</template>

about.js

export class About {}

about.html

<template>
  <h1>About Page</h1>
</template>

contact.js

export class Contact {}

contact.html

<template>
  <h1>Contact Page</h1>
</template>

You will see we are mapping routes by using config.map . This accepts an array of routes object which registers url and the page it will display. route is the url pattern and we can specify route parameter also by usign :param_name in the pattern, name is the route name, moduleId is the component name.

config.title is just setting the value of html title tag and a router instance is passed in the function parameter which is setting the router variable which will be used to redirect and change url programmatically and for other stuff.

Now only one thing left we need to tell in app.html where our page will be displayed. there is a <router-view> tag for this. So Our app.html file will look like this.

<template>
   <ul>
    <li><a href="/">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
   </ul>
   <router-view></router-view>
</template>

router-view will be replaced by actual page based on the url. Now If you run the project you will see something like this. We put some links in the li tag so user can navigate by clicking. You will notice there is a # tag in the url which tells aurelia that match url pattern after # and render view accordingly.

Aurelia Routing

If you click on the links (Home, About, Contact), corresponding page will be displayed and if you go to http://localhost:8080/#user/1 it will display user page with the route parameter value which was passed with url.