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

我想使用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>，因此正在使用最近的一个。

导航到其他页面后，应使用app.html的<router-view></router-view>，而应从DOM中删除其他页面（page1.html）。

提前致谢。

最佳答案

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

当您想要子路由器时，无需将路由器注入构造函数中，而是在VM上编写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;
  }
}

关于javascript - 使用多个<router-view> </router-view>的Aurelia子路线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37814515/