Javascript Aurelia compose元素视图模型，未调用configureRouter

我有一个包含路由的父视图（视图）：

然后，在我的compose元素（添加小部件模块）的视图模型中，从未调用configureRouter，但它正在加载模块，因为html正在呈现到页面：

export class AddWidget{

  configureRouter(config, router){
    console.log('in configureRouter in add-widget');
    console.log(router);
    this.router = router;
    router.title = 'add widget';
    config = config;
    config.map([
        { route:['', 'chart'], moduleId:'./chart', nav: true, title: 'chart', name: 'chart' },
        { route:'gecko', moduleId:'./gecko', nav: true, title: 'gecko', name: 'gecko' },
        { route:'list', moduleId:'./list', nav: true, title: 'list', name: 'list' }
    ]);

  }//configureRouter()

  constructor(){

    console.log('add widget ctor');

  }//constructor()
}//class AddWidget

视图：

添加模板


${route.title}

---

从未调用过两个console.log（）。所以我推测configureOuter（）永远不会被调用。为什么会这样？

自定义元素不支持子路由器，只支持页面

---

此外，您在这里误用了

compose

元素。您有一个静态确定的视图和viewmodel，因此无需使用

compose

元素。

replicate of，因此我唯一的选择是真正使用视口并为每个父管线重复同级布线层次结构？我不会说“仅”当我看到您的体系结构时，我知道您不能使用自定义元素来完成这项工作，并找出是否有更好的方法来完成您试图完成的任务。我在创建向导元素时遇到了类似的问题。解决方案是在包含我的向导的父页面内配置路由器，并将路由器绑定到它。

configureRouter(config, router){

    this.router = router;
    config.title = "NexLP Dashboard";
    config.map([
        { route:['', 'insights'], moduleId:'../insights/insights', nav:     true, title: 'insights' },
        { route:'investigate', moduleId:'../investigate/investigate', nav: true, title: 'investigate' },
        { route:'research', moduleId:'../research/research', nav: true, title: 'research' }
    ]);

}//configureRouter()

export class AddWidget{

  configureRouter(config, router){
    console.log('in configureRouter in add-widget');
    console.log(router);
    this.router = router;
    router.title = 'add widget';
    config = config;
    config.map([
        { route:['', 'chart'], moduleId:'./chart', nav: true, title: 'chart', name: 'chart' },
        { route:'gecko', moduleId:'./gecko', nav: true, title: 'gecko', name: 'gecko' },
        { route:'list', moduleId:'./list', nav: true, title: 'list', name: 'list' }
    ]);

  }//configureRouter()

  constructor(){

    console.log('add widget ctor');

  }//constructor()
}//class AddWidget

   <template>

add template

<ul class="add-widget-nav flex">
    <li repeat.for="route of router.navigation">
        ${route.title}
    </li>
</ul>