Aurelia Router Not Working

Question

Hi I'm new to Aurelia framework. I'm stuck in Routing. I have installed aurelia-router too, but still it is not working.

Below is my app.js

export class App {
message = "Hello Pathways";
configureRouter(config, router){
config.title = 'Aurelia';
config.options.pushState = true;
config.options.root = '/';
  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;}}

And below is my app.html file

<template>
    ${message}
    <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 I run this page it is displaying an empty page, and if I remov the router-view tag, page is displayed with the welcome message.

In config.js I changed the following.

paths: {
    "*":"src/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
},

Please help me to fix this. I've tryed this for more than 2 days.

What URL are you trying? Have you checked the console for errors? — Tom
@saravana - the only possible error I could guess is "./components/home/home" or "./components/about/about" is not present accessible Could you check the console error and share it across so that it will give the clear idea about the error you are facing — Manoj Shevate

hongchen hongchen · Accepted Answer · 2017-05-11T10:08:01

import { Router, RouterConfiguration } from 'aurelia-router';
import { autoinject } from 'aurelia-framework';

@autoinject
export class App {


 configureRouter(config: RouterConfiguration, router: Router) {
        this.router = router;
        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'
                      }
                 ]);
    }

 <ul class="navbar">
   <template repeat.for="route of router.navigation">
      <li class="${route.isActive ? ' active ' : ' '}">
                <a class="navbar-link" href.bind="route.href">${route.title}</a>
      </li>
    </template>
 </ul>

This code is working on my side

Aurelia Router Not Working

2 Answers