Appending a value to the Aurelia router config.title

Question

I want to set a base title value for my Aurelia application and then append a value to it based on the route that is active.

My router configuration is:

export class App {
    configureRouter(config, router) {
        config.title = 'Brandon Taylor | Web Developer | Graphic Designer';
        config.map([
            . . .
            { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' },
            . . .
        ]);

        this.router = router;
    }
}

Aurelia wants to append the title navigation parameter to the beginning of the config.title, but I would like it at the end.

I've tried doing an override in the view model:

export class Work {
    activate(params, routeConfig, navigationInstruction) {
        routeConfig.navModel.router.title += ' | work';
    };
}

but this results in:

Brandon Taylor | Web Developer | Graphic Designer | work | work | work ...

on each routing request. What am I doing wrong? or how can I append the route title attribute to the end of the config.title instead of the beginning?

Answer 1

Aurelia's standard title logic prepends the route title to the outer route/router's title. For example, in the skeleton-navigation app, the application router's title is Aurelia. The github users route's title is prepended to the router title producing Github Users | Aurelia. If you were to navigate to the child router page, the title updates to Welcome | Child Router | Aurelia.

If I understand the question correctly, you would like this logic reversed. The desired result in this example would be Aurelia | Child Router | Welcome.

The title building logic resides in NavigationContext class's buildTitle method.

You can override this method by adding the following to your main.js:

// import the NavigationContext class.  It contains the method that
// builds the title.
import {NavigationContext} from 'aurelia-router';

// rename the standard "buildTitle" method.
NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle;

// replace the standard "buildTitle" method with a version that
// reverses the order of the title parts.
function buildTitle(separator = ' | ') {
  let standardTitle = this.standardBuildTitle(separator);
  return standardTitle.split(separator).reverse().join(separator);
}
NavigationContext.prototype.buildTitle = buildTitle;

The end result looks like this: