Aurelia How do I use a Child Router and dynamics child routes

Question

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?

Why wont my route-href work in this example? I have a route in this router named screen and it does have an :id parameter

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' }
      ]);
    });
  }
}

List View

screens/list.html

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

I then have a dummy VM/V at screens/screen/display. 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?

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

In your example, you are injecting the router, which is the router configured in app.js, and then calling its configure method. Aurelia is Convention-Over-Configuration. So, use the convention and you will be fine. The configureRouter method will do the tricks for you. For instance:

export class ScreensList {

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

    this.router = router;
  }

}

Remember that ScreensList must be a screen of your router. It will not work if it is a custom element.

Take a look at the skeleton-navigation examples https://github.com/aurelia/skeleton-navigation. There are good examples, including child routing.