使用viewPorts的多个路由的多个路由器视图

Question

我是aurelia的新手， 在我的app.js中，我有两个路由器，如下所示：

export class App {
 configureRouter(config, router) {
 config.title = 'Aurelia';
 config.map([ 
  { route: '', name: 'home', viewPorts: { left: { moduleId: 'home' }, 
   right: { moduleId: 'contact' }  }, title:'home' },
  { route: 'about', name: 'about', viewPorts: { center: { moduleId: 
   'about' } }, title:'about'  }
]);
this.router = router;
}[enter image description here][1]
}

并在app.html

<template>
     <div style="border: 1px solid black;">
     <router-view name="left"></router-view>
    </div>

    <br />

    <div style="border: 1px solid green;">
    <router-view name="right"></router-view>
   </div> 

   <br /> 

   <div style="border: 1px solid red;">
   <router-view name="center"></router-view>
   </div> 
</template>

并在输出中 路由器视图，左侧和右侧，分别显示家庭和联系人的内容。 但是带有名称中心的路由器视图，不会显示任何有关的内容。

提前致谢