Question

我创建了一个full repro of this issue on GitHub，其中包含重现的说明。

基本上，在创建嵌套参数化路线时，深层链接仍然会解析到正确的位置但动态创建的元素不会使用正确的链接进行初始化。只有通过在路由之间导航，动态创建的链接（route-href绑定）才能正确初始化。

更新：以下是解释此问题的另一种尝试：

当深度链接到具有<a route-href绑定的嵌套页面时，链接似乎在不知道父上下文的情况下进行初始化。例如，位于http://localhost:9000/#/primary2/secondary2/ 视图中的项目链接的href http://localhost:9000/#/primary2/secondary2/item/1只有最后一部分：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

一个小的调整会使原始版本起作用。

在this.items事件而不是attached()上填充constructor()，因为configureRouter()将在constructor()之后但attached()之前调用。

这样，在repeat.for生成列表项之前，路由器将有机会了解其他子路由。

<强> secondary2.ts

constructor() {
}

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

Answer 2

一种解决方法（由Aurelia社区成员@TylerJPresley推荐）是使用全局路由表和手动定义的链接。这仍允许在动态项链接上使用route-href;它似乎是嵌套的父路线。

代码示例位于GitHub上的存储库中的workaround-globalRoutes分支。

嵌套参数化路线和深层链接（例如书签）的问题

App.ts

Primary2.ts

Secondary2.ts

secondary2.html

2 个答案: