Aurelia 하위 라우터 및 다이내믹 하위 경로는 어떻게 사용합니까?

Question

Aurelia에서 하위 경로를 사용하려고합니다. 중첩 된 경로의 작동에 대해 머리를 터는 것처럼 보이지 않습니다. 모든 루트가 앱 루트 또는 현재 라우터의 위치에서 파생 되었습니까?

왜 내 경로 -href는이 예제에서 작동하지 않습니까? 그때 screens/screen/display에서 더미 VM/V가 나는 screen 이름이 라우터에서 경로를 가지고 있으며

screens/list.ts 

@inject(Router) 
export class ScreensList { 
    heading; 
    router; 
    screens: any[]; 

    constructor(router){ 
    this.heading = 'Child Router'; 
    this.router = router; 
    this.screens = [ 
     { 
     id: 1, 
     name: 'my screen' 
     }, 
     { 
     id: 2, 
     name: 'my other screen' 
     } 
    ] 

    router.configure(config => { 
     config.map([ 
     // dynamic routes need a href, such as href: screen 
     { route: 'screen/:id', moduleId: 'screens/screen/display', name: 'screen', title: 'Screen #1' } 
     ]); 
    }); 
    } 
} 

목록보기에게 :id 매개 변수를

screens/list.html 

<li repeat.for="screen of screens"> 
    <a route-href="route: 'screen', params: { id: screen.id }"/>Screen #${screen.id}</a> 
</li> 

을 가지고있다. 중첩 된 자식 라우터의 모듈에 전체 파일 경로를 지정해야합니까? 부모 라우터의 위치 또는 부모의 이름 (루트)에 상대적인 경로라고 생각 했습니까?

vendor-bundle.js:11582 ERROR [route-href] Error: A route with name ''screen', params: { id: screen.id }' could not be found. 
Check that `name: ''screen', params: { id: screen.id }'` was specified in the route's config. 

Answer 1

이 예에서는 app.js에 구성된 라우터 인 라우터를 주입 한 다음 configure 메소드를 호출합니다. Aurelia는 컨벤션 오버 구성입니다. 그래서 대회를 이용하면 괜찮을 것입니다. configureRouter 방법이 유용한 정보를 제공합니다. 예를 들어 :

export class ScreensList { 

    configureRouter(config, router) { 
    config.map([ 
     { route: 'screen/:id', moduleId: 'screens/screen/display', name: 'screen', title: 'Screen #1' } 
    ]); 

    this.router = router; 
    } 

} 

는 ScreensList 라우터의 화면해야합니다 기억하십시오. 맞춤 요소 인 경우 작동하지 않습니다.

스켈레톤 탐색 예제 https://github.com/aurelia/skeleton-navigation을 살펴보십시오. 하위 라우팅을 포함한 좋은 예가 있습니다.