2017-05-11 10 views
1

안녕하세요, 저는 Aurelia 프레임 워크를 처음 사용하고 있습니다. 나는 라우팅에 갇혀있다. 나는 아우렐 리아 라우터도 설치했으나 여전히 작동하지 않습니다. 다음은 Aurelia 라우터가 작동하지 않습니다.

아래 내 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;}} 

그리고 내 app.html 파일입니다

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

내가 라우터를 remov 경우, 나는 그것이 빈 페이지를 표시이 페이지를 실행하고

-view 태그, 환영 메시지와 함께 페이지가 표시됩니다.

config.js에서 다음을 변경했습니다.

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

제발 도와주세요. 나는 이것을 2 일 넘게 tryed했습니다.

+0

내 옆에 노력하고 있습니다? 콘솔에 오류가 있는지 확인 했습니까? – Tom

+0

@ saravana - 추측 할 수있는 유일한 오류는 "./components/home/home"또는 "./components/about/about"입니다. 액세스 할 수 없습니다. 콘솔 오류를 확인하고 공유하여 오류가 발생하지 않도록 할 수 있습니까? 직면하고있는 오류에 대한 명확한 아이디어를 제공하십시오. –

답변

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

이 코드는 려 URL