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;
    });

情境：

导航到page1后，相应的子路径（第1.1页，第1.2页）将出现在相应的页面下。

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

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

一旦我导航到其他页面，应该使用app.html的{{1}}，并且应该从DOM中删除其他（page1.html）。

提前致谢。

Answer 1

顺便说一句，如果您使用箭头功能，则不需要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;
  }
}

Aurelia Child Route使用多个<router-view> </router-view>

1 个答案: