在模块内部，Aurelia中创建childRouter

Question

也许这是一个愚蠢的问题。但是，在这里，我们有一个包含父导航的页面，该页面在“ main” js文件中设置。那个可行，但是在其中一个标签中，我显示了一个扩展的表格。我展开的每一行都会加载一个像这样的模块<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

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

也许我使事情复杂化了，我只想要这样的东西：

但是表中的每一行都会有一个。天哪，我希望我能对此进行解释。有任何问题，请让我知道！

Answer 1

首先让我们谈论

目录结构。这是我发现确实有用的示例。

project_src /

• app.html
app.js
• 页面/
• home /
home.html
• home.js
• child-app /
• child-app.js
child-app.html
• child-app-page /
• 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并设置您的路由。