使用多个 <router-view></router-view> 的 Aurelia 子路由

Question

我想使用 Aurelia 框架实现子路由。

我不是在寻找这个解决方案，如以下链接所示，multi-level-menu。

下面是代码：

app.html

<div class="page-host">
     <router-view></router-view>
</div>

app.js/app.ts

var _self = this;
this.router.configure(config => {
        config.map(this.routes);
        config.mapUnknownRoutes(instruction => {
        _self.router.navigate(_self.defaultRoute);
            return '';
        });

        this.router = router;
        this.sideNavObj.navigationRouteList = this.router.navigation;
        return config;
    });

page1.html

<section>
    <h2>Child Routes</h2>
    <div>
        <div class="col-md-2">
            <ul class="well nav nav-pills nav-stacked">
                <li repeat.for="row of childRoutes">
                    <span click.delegate="router.navigate('#/' + row.route)">${row.title}</span>
                </li>
            </ul>
        </div>
        <div class="col-md-10 childRouterDiv">
            <router-view></router-view>
        </div>
    </div>
</section>

page1.js/page.ts

var _self = this;
this._router.configure(config => {
        config.map(_self.childRoutes);
        return config;
    });

场景：

一旦您导航到第 1 页，相应的子路线（第 1.1 页、第 1.2 页）就会出现在相应的页面下。

但是，如果您导航到作为主菜单一部分的 page2（不是子路由或子菜单），则合成/渲染发生在 page1.html 的 <router-view></router-view> 而不是 app.html 下。

由于我的 DOM 中有两个 <router-view></router-view>，因此正在使用最近的一个。

一旦我导航到其他页面<router-view></router-view> app.html 应该被使用并且其他（page1.html）应该从 DOM 中删除。

提前致谢。

Answer 1

顺便说一句，如果您使用箭头函数，则无需执行var _self = this;。

当你想要一个子路由器时，你没有将路由器注入到构造函数中，你可以在你的虚拟机上编写一个configureRouter 函数。将为您创建子路由器并将其传递给该函数。这在 Aurelia 骨架中的 child-router 中显示：

import {Router, RouterConfiguration} from 'aurelia-router'

export class ChildRouter {
  heading = 'Child Router';
  router: Router;

  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([
      { route: ['', 'welcome'], name: 'welcome',       moduleId: 'welcome',       nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',         moduleId: 'users',         nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router',  moduleId: 'child-router',  nav: true, title: 'Child Router' }
    ]);

    this.router = router;
  }
}