Hi @norgie ,
I have been playing around a little with this issue.
First, I created an empty Aurelia project skeleton (using TypeScript) and added the following three placeholder views:
home.html:
<template>
This is the Home view.
</template>
details.html:
<template>
This is the Details view.
</template>
graph.html:
<template>
This is the Graph view.
</template>
Then I created a new nav-bar component:
nav-bar.html:
<template>
<ul>
<li repeat.for="nav of router.navigation">
<a href.bind="nav.href">${nav.title}</a>
</li>
</ul>
</template>
nav-bar.ts:
import { autoinject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
@autoinject
export class NavBar {
router: Router;
constructor(router: Router) {
this.router = router;
}
}
and changed the app component’s code to this:
app.html:
<template>
<require from="./nav-bar"></require>
<nav-bar></nav-bar>
<router-view></router-view>
</template>
app.ts:
import { PLATFORM } from 'aurelia-pal';
import { RouterConfiguration } from 'aurelia-router';
export class App {
configureRouter(config: RouterConfiguration) {
config.title = 'Aurelia';
config.options.pushState = true;
config.options.root = '/';
config.map([
{
route: '', redirect: 'home'
},
{
route: 'home', name: 'home', moduleId: PLATFORM.moduleName('home.html'),
title: 'Home', nav: 1
},
{
route: 'details', name: 'details', moduleId: PLATFORM.moduleName('details.html'),
title: 'Details', nav: 2
},
{
route: 'graph', name: 'graph', moduleId: PLATFORM.moduleName('graph.html'),
title: 'Graph', nav: 3
}
]);
}
}
With this code in place, I was able to switch between the three views using the navigation component. So far so good.
Next, I started working on making the navigation’s home view’s title change to ‘To the homepage’ instead of just ‘Home’ when the details view or the graph view is rendered.
Turned out that I didn’t have to do anything with event handling at all! 
First, I configured the details and graph routes to include a custom setting called overriddenHomeTitle, which I set to 'To the homepage':
{
route: 'details', name: 'details', moduleId: PLATFORM.moduleName('details.html'),
title: 'Details', nav: 2,
settings: {
overriddenHomeTitle: 'To the homepage'
}
},
{
route: 'graph', name: 'graph', moduleId: PLATFORM.moduleName('graph.html'),
title: 'Graph', nav: 3,
settings: {
overriddenHomeTitle: 'To the homepage'
}
}
Next, I edited the nav-bar's HTML view to render these custom settings when appropriate.
The Router object has a currentInstruction property, which in turn contains a config property that represents the RouteConfig object specified in the router configuration in the app component. So when you have a Router object called router, you can get the overriddenHomeTitle custom setting of the current route with router.currentInstruction.config.settings.overriddenHomeTitle.
Of course, this value should only be overridden for the home entry in the navigation bar. It could be done using a ternary operator that checks if nav.config.name == 'home', but I chose to use some nasty && and || operator logic, which is a little more compact. 
This is my resulting nav-bar component’s view:
nav-bar.html:
<template>
<ul>
<li repeat.for="nav of router.navigation">
<a href.bind="nav.href">${(nav.config.name == 'home' && router.currentInstruction.config.settings.overriddenHomeTitle) || nav.title}</a>
</li>
</ul>
</template>
I made a Dumber Gist so that you can check it out.
Is this what you are looking for?
