Issue with nested parameterized routes and deep-links (e.g. bookmarks)

Question

I've created a full repro of this issue on GitHub with instructions to reproduce.

Essentially, when creating a nested parameterized route, a deep-link still resolves to the right place but dynamically-created elements don't get initialized with the right link. Only by navigating between routes do dynamically-created links (route-href bindings) get initialized properly.

UPDATE: Here's another attempt to explain the issue:

When deep-linking to a nested page that has <a route-href bindings, the links seem to be initialized without awareness of the parent context. E.g., where an item link located on the view for http://localhost:9000/#/primary2/secondary2/ should have an href of http://localhost:9000/#/primary2/secondary2/item/1 it only gets the last part: http://localhost:9000/#/item/1.

App.ts

configureRouter(config: RouterConfiguration, router: Router){
  config.title = 'Aurelia Nested Routes Issue';
  config.map([
    { route: '', redirect: 'primary1' },
    { route: 'primary1',  moduleId: 'primary1', name:'primary1', nav: true, title: "Primary 1" },
    { route: 'primary2',  moduleId: 'primary2', name:'primary2', nav: true, title: "Primary 2" }
  ]);
  this.router = router;
}

Primary2.ts

configureRouter(config: RouterConfiguration, router: Router){
  config.map([
    { route: '', redirect: 'secondary1' },
    { route: 'secondary1',  moduleId: 'secondary1', name:'secondary1', nav: true, title: "Secondary 1" },
    { route: 'secondary2',  moduleId: 'secondary2', name:'secondary2', nav: true, title: "Secondary 2" }
  ]);

  this.router = router;
}

Secondary2.ts

configureRouter(config: RouterConfiguration, router: Router){
    config.map([
        { route: '',          moduleId: 'no-item',   title: 'Select an item'},
        { route: 'item/:id',  moduleId: 'item-detail', name:'item' }
    ]);
    this.router = router;
}

secondary2.html

<ul>
  <li repeat.for="item of items">
    <a class="${item == $parent.currentItem ? 'active' : ''}" route-href="route: item; params.bind: {id:item.id}">
      ${item.description}
    </a>
  </li>
</ul>
<hr>
<router-view></router-view>

Answer 1

One small adjustment would make the original version work.

Populate this.items on attached() event instead of constructor(), because configureRouter() will be called after constructor() but before attached().

This way the router will have a chance to become aware of additional child routes before repeat.for generates the list items.

secondary2.ts

constructor() {
}

attached() {
  this.items.push(new Item(1, "Item 1"));
  this.items.push(new Item(2, "Item 2"));
}

Answer 2

One workaround (recommended by Aurelia community member @TylerJPresley) is to use a global routes table and manually-defined links. This still allows the use of route-href on the dynamic item links; it appears to be the nested parent routes that throw it off.

Code example is in the workaround-globalRoutes branch in the repository on GitHub.