”;
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.
”;