Aurelia如何使用子路由器和动态子路由 [英] Aurelia How do I use a Child Router and dynamics child routes

问题描述

尝试在Aurelia中使用子路线.似乎无法理解嵌套路线的运作方式.所有路由都源自应用程序的根目录还是相对于当前路由器的位置?

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?

在此示例中，为什么我的route-href不起作用?我在此路由器中有一条名为screen的路由，并且确实有一个:id参数

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

列表视图

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. 我是否真的必须为嵌套子路由器中的模块指定完整的文件路径.我以为是相对于父路由器位置的路由，或者至少是父服务器名称(根)的路由?

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.

推荐答案

在您的示例中，您要注入路由器(即在app.js中配置的路由器)，然后调用其configure方法. Aurelia是Convention-Over-Configuration.因此，使用约定就可以了. configureRouter方法将为您解决问题.例如:

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;
  }

}

请记住，ScreensList必须是路由器的屏幕.如果它是一个自定义元素，它将不起作用.

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

看看骨骼导航示例 https://github.com/aurelia/skeleton-navigation .有很好的例子，包括子路由.

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

这篇关于Aurelia如何使用子路由器和动态子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！