title: Aurelia How do I use a Child Router and dynamics child routes
body: <p>Trying to use a child route in Aurelia. Can't seem to get my head around the workings of nested routes. Are all routes derived from the root of the app or relative to location of the current router?</p>
  
  <p>Why wont my route-href work in this example? I have a route in this router named <code>screen</code> and it does have an <code>:id</code> parameter</p>
  
  <pre><code>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 =&gt; {
        config.map([
          // dynamic routes need a href, such as href: screen
          { route: 'screen/:id',  moduleId: 'screens/screen/display',  name: 'screen', title: 'Screen #1' }
        ]);
      });
    }
  }
  </code></pre>
  
  <p>List View</p>
  
  <pre><code>screens/list.html
  
  &lt;li repeat.for="screen of screens"&gt;
    &lt;a route-href="route: 'screen', params: { id: screen.id }"/&gt;Screen #${screen.id}&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I then have a dummy VM/V at <code>screens/screen/display</code>. 
  Do I really have to specify the full filepath for a module in a nested child router. I thought it would be routes relative to the location of the parent router or at least the name (root) of the parent?</p>
  
  <pre><code>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.
  </code></pre>