javascript - Aurelia 子路由使用多个

Question

我想使用 Aurelia Framework 实现子路由。

我不是在寻找以下链接中所示的解决方案，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;
    });

Scenario:

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

但是如果你导航到 page2 这是主菜单的一部分(不是子路由或子菜单)，组合/渲染发生在 <router-view></router-view> 下。 page1.html 不是 app.html。

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

一旦我导航到其他页面<router-view></router-view>应使用 app.html 的，其他(page1.html 的)应从 DOM 中删除。

提前致谢。

Answer 1

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

当你想要一个子路由器时，你没有将路由器注入(inject)到构造函数中，而是在你的 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;
  }
}