Question

尝试在Aurelia使用儿童路线。似乎无法理解嵌套路线的运作方式。是否所有路由都是从应用程序的根目录或相对于当前路由器的位置派生的？

为什么我的route-href在这个例子中不起作用？我在此路由器中有一个名为screen的路由，它有一个:id参数

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

列表视图

screens/list.html

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

然后我在screens/screen/display处有一个虚拟VM / V. 我是否真的必须在嵌套子路由器中指定模块的完整文件路径。我以为它是相对于父路由器位置的路由，或者至少是父路由器的名称（根）？

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是Convention-Over-Configuration。所以，使用惯例，你会没事的。 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。有很好的例子，包括子路由。

Aurelia如何使用子路由器和动态子路由

1 个答案: