Nested routing in aurelia js

Question

Is there any way to have nested routing/child router in Aurelia JS
as we have in ui-router for angular js?
so that we can achieve following

• Update the partial view (only update a selected portion on the given event).
• having parent child relationship in the components
  

TIA

Answer 1

Yes, it does.

Multiple View Ports

http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9

You can define two or more different views to be affected by a route, by creating more than one <router-view> in your template like this:

<template>
  <div class="page-host">
    <router-view name="left"></router-view>
  </div>
  <div class="page-host">
    <router-view name="right"></router-view>
  </div>
</template>

And then defining both destinations in your individual routes:

{ route: 'users', name: 'users', viewPorts: { left: { moduleId: 'user/list' }, right: { moduleId: 'user/detail' } } }

Accessing your Router from Parent to Affect Child

See this post and the first answer for an in-depth explanation for how to access the Router to create parent/child component routing.

Linking directly to both parent+child views/controllers from the main navigation menu

In summary, you probably need to access your main router by injecting it into any parent components that need child routing, like this:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class SomeParent {
  constructor(router) {
    this.router = router;
  }
}

More Examples

You should check out the skeleton-navigation examples at https://github.com/aurelia/skeleton-navigation. There are good examples, including how to do child routing.