Create childRouter inside module, Aurelia

Question

Mabey this is a stupid question. But here we go, I have one page with parent navigation that is setup in the "main" js file. That one works, but in one of the tabs I show a table that expands. Every row that I expand loads a module like this <detail-page></detail-page> In that custom-element I have a classic ul like this:

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

This code should create tabs four tabs based on the routerNavigation, nothing new there.

Now to the big question, how do I create a childRouter without the configureRouter(config, router). Because this expanded "module(detailPage)" is not navigated to..., the configureRouter(config, router) is never called obviously. I have tried to create a childRouter like this according to the aurelia documentation:

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

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

That does not solve my problem because next step is to create the map with routes, I cant figure out how to do that.

Mabey I overcomplicating things, All i want is some thing like this:

But there will be one off those for every row in the table. Omg I hope I was able to explane that. Any question, please let me know!

Answer 1

Sorry it took so long to get an answer but here it is!

Firstly lets talk about directory structure. Here is an example of what I use that I found really helpful.

• project_src/
  • app.html
  • app.js
  • pages/
    • 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'
            },

It's really that easy. Just having an additional element inside a View Model. Just need to inject your router and call the configureRouter built in function and setup ur routes.