在模块 Aurelia 中创建 childRouter

Question

也许这是个愚蠢的问题。但是我们开始吧，我有一个页面带有在 "main" js 文件中设置的父导航。那一个有效，但在其中一个选项卡中，我显示了一个扩展的 table。我展开的每一行都会加载一个像这样的模块 <detail-page></detail-page> 在那个自定义元素中我有一个像这样的经典 ul：

<section>
            <div class="col-sm-12">
              <ul class="nav nav-tabs tabs-top">
                <li
                  repeat.for="row of router.navigation"
                  class="${row.isActive ? 'active' : ''}"
                >
                  <a href.bind="row.href">
                    <i
                      if.bind="row.config.icon"
                      class="fa fa-cog"
                      aria-hidden="true"
                    ></i>
                    <span t="${row.title}"></span>
                  </a>
                </li>
              </ul>
              <div class="panel panel-section">
                <div class="panel-body">
                  <router-view></router-view>
                </div>
              </div>
            </div>
          </section>

此代码应基于 routerNavigation 创建四个选项卡，没有什么新内容。

现在有个大问题，如何创建没有 configureRouter(config, router) 的 childRouter。因为这个扩展的 "module(detailPage)" 没有被导航到...，所以 configureRouter(config, router) 显然从来没有被调用过。我试图根据 aurelia 文档创建这样的 childRouter：

this.router = this.parentRouter.container.createChild();

https://aurelia.io/docs/api/router/class/AppRouter/method/createChild

这并没有解决我的问题，因为下一步是创建带有路线的地图，我不知道该怎么做。

也许我把事情复杂化了，我想要的只是这样的事情：

但是 table 中的每一行都会有一个。我的天啊，我希望我能解释一下。有任何问题，请告诉我！

Answer 1

很抱歉花了这么长时间才得到答案，但就在这里！

首先让我们谈谈目录结构。这是我发现非常有用的示例。

project_src/
- app.html
- app.js
- 页数/
  - 首页/
  - home.html
  - home.js
  - child-app/
    - child-app.js
    - child-app.html
    - child-app页/
      - child-app-page.js
      - child-app-page.html

app.js:

        configureRouter(config, router) {
            {
                route: '/child-app',
                name: 'child-app',
                moduleId: 'pages/home/child-app',
                title: 'Child App'
            },

child-app.html:

<template>
   <router-view></router-view> <!-- This should already exist -->
</template>

child-app.html:

<template>
   <!-- Extra fluff u want in here (Maybe that navbar you have in ur design could go here)-->
   <router-view></router-view> <!-- Your information area would be rendered here -->
</template>

child-app.js:

        configureRouter(config, router) {
            const childAppRoot = 'pages/home/child-app/';
            {
                route: ['child-app-page', ''],
                name: 'child-app-page',
                moduleId: childAppRoot + 'child-app-page/child-app-page',
                title: 'Child App Page'
            },

真的就是这么简单。只是在视图模型中有一个额外的元素。只需要注入你的路由器并调用 configureRouter 内置函数并设置你的路由。

在模块 Aurelia 中创建 childRouter

Create childRouter inside module, Aurelia

aurelia