CODEWITHSUNDEEP
aurelia
saravana
saravana

Reputation: 21

Aurelia Router Not Working

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.

Upvotes: 1

Views: 1586

Answers (2)

BobSpring
BobSpring

Reputation: 87

Check you config.map

config.map([ ( route: ['','home'], name: 'home',
moduleId: './components/home/home', nav: true, title:'Home' ),

You are creating an infinite map by routing to the same page over and over again.

Try remove '' and replacing with something else. ( route: ['base','home'], name: 'home',
and see if it runs.

Upvotes: 1

hongchen
hongchen

Reputation: 85

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

Upvotes: 1

Related Questions