Javascript 使用多个

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

我不是在寻找如下链接所示的解决方案

代码如下：

app.html

页面1.html

情景：

导航到第1页后，相应的子路由第1.1页、第1.2页将位于相应的页面下

但是，如果您导航到page2，它是主菜单的一部分，而不是子路由或子菜单，则合成/渲染将在page1.html而不是app.html下进行

因为我的DOM中有两个，所以正在使用最近的一个

一旦我导航到app.html的其他页面，就应该使用app.html，并且应该从DOM中删除otherof page1.html

---

提前感谢。

顺便说一句，你不需要做var\u self=这个；如果您使用的是箭头函数

当您想要一个子路由器时，您没有将路由器注入构造函数，而是在VM上编写configureRouter函数。子路由器将为您创建并传递给该函数。这显示在Aurelia框架中的子路由器中：

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

---

顺便说一句，你不需要做var\u self=this；如果您使用的是箭头函数

当您想要一个子路由器时，您没有将路由器注入构造函数，而是在VM上编写configureRouter函数。子路由器将为您创建并传递给该函数。这显示在Aurelia框架中的子路由器中：

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

---

谢谢，我已经试过了，但是控制台出现了错误。在你回复后，我意识到我的错误，其中一条路线需要空字符串。如果错了，请纠正我。这可能是StackOverflow有史以来最好的答案。你能在自定义元素中使用子路由器吗？@BuildingJarl所以我让中继器构建菜单，但我也只想在右侧登录。我该怎么做？你找到解决办法了吗？@ashley grant看来在子路由器中需要一条空路由路径？为什么会有这个限制？谢谢，我已经试过了，但是控制台出现了错误。在你回复后，我意识到我的错误，其中一条路线需要空字符串。如果错了，请纠正我。这可能是StackOverflow有史以来最好的答案。你能在自定义元素中使用子路由器吗？@BuildingJarl所以我让中继器构建菜单，但我也只想在右侧登录。我该怎么做？你找到解决办法了吗？@ashley grant看来在子路由器中需要一条空路由路径？为什么会有这样的限制？

<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>

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

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