Child routers

Another common scenario is the need to support routes within routes; this is sometimes called nested or child routes. For example, you might have multiple pages under the parent /about route that are represented by the /about/author and /about/publisher URLs, which are displayed as different subsections of the main /about page.

To do this, the parent route has to capture child routes. It can do this with a splat route or with the hasChildRoutes property:

router.map([
  { route: 'about', moduleId: 'about/index', title: 'About', nav: true, hasChildRoutes: true }
  //OR
  { route: 'about*children', moduleId: 'about/index', title: 'About', nav: true }
]);

Either way is fine, but note that the about*children splat route requires at least one character after the asterisk (*); the about* route will not capture the children properly. Personally, I think the hasChildRoutes property has a clearer intention.

Next, the viewmodel that exposes child routes creates a child router:

define(['plugins...