Add value to Aurelia router config.title

Question

I want to set a base header value for my Aurelia application and then add a value to it based on the active route.

My router configuration:

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 add a title navigation parameter to the beginning of config.title , but I would like it at the end.

I tried to make an override in the view model:

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

but this leads to:

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

for each routing request. What am I doing wrong? or how to add the route attribute title to the end of config.title instead of the start?

Answer 1

Thanks for pointing me in the right direction @ Jeremy Danyu.

What I ended up with:

 import {NavigationContext} from 'aurelia-router'; NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle; function buildTitle(separator=' | ') { var titleValues = this.standardBuildTitle(separator).split(separator), routeTitle = titleValues[0], configTitle = titleValues.slice(1); configTitle.push(routeTitle); return configTitle.join(separator); } NavigationContext.prototype.buildTitle = buildTitle; 

The reason is that this:

 config.title = 'Brandon Taylor | Web Developer | Graphic Designer' 

and call:

 return standardTitle.split(separator).reverse().join(separator); 

leads to:

 Graphic Designer | Web Developer | Brandon Taylor | about 

instead:

 Brandon Taylor | Web Developer | Graphic Designer | about 

Answer 2

Aurelia standard header logic adds a route header to the external route / router header. For example, in a skeleton navigation application, the name of the application router is Aurelia. The github user route header is added to the router header, creating Github Users | Aurelia Github Users | Aurelia . If you need to go to the page of the child router, the title will be updated to Welcome | Child Router | Aurelia Welcome | Child Router | Aurelia Welcome | Child Router | Aurelia .

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

The header logic is in the NavigationContext class buildTitle .

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 is as follows:

Answer 3

I know that the above code is a dirty workaround, but it may help you until you get a great way to get what you want from Aurelia support.

Could you do:

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