Set document title on route change

src/routing/Router.ts

@@ -1,3 +1,4 @@
+import global from '../shim/global';
 import Evented from '../core/Evented';
 import {
 	RouteConfig,
@@ -179,7 +180,7 @@ export class Router extends Evented<{ nav: NavEvent; route: RouteEvent; outlet:
 	private _register(config: RouteConfig[], routes?: Route[], parentRoute?: Route): void {
 		routes = routes ? routes : this._routes;
 		for (let i = 0; i < config.length; i++) {
-			let { path, outlet, children, defaultRoute = false, defaultParams = {}, id } = config[i];
+			let { path, outlet, children, defaultRoute = false, defaultParams = {}, id, title } = config[i];
 			let [parsedPath, queryParamString] = path.split('?');
 			let queryParams: string[] = [];
 			parsedPath = this._stripLeadingSlash(parsedPath);
@@ -189,6 +190,7 @@ export class Router extends Evented<{ nav: NavEvent; route: RouteEvent; outlet:
 				params: [],
 				id,
 				outlet,
+				title,
 				path: parsedPath,
 				segments,
 				defaultParams: parentRoute ? { ...parentRoute.defaultParams, ...defaultParams } : defaultParams,
@@ -326,6 +328,17 @@ export class Router extends Evented<{ nav: NavEvent; route: RouteEvent; outlet:
 				matchedRoute.type = 'error';
 			}
 			matchedRouteId = matchedRoute.route.id;
+			const title = this._options.setDocumentTitle
+				? this._options.setDocumentTitle({
+						id: matchedRouteId,
+						title: matchedRoute.route.title,
+						params: matchedRoute.params,
+						queryParams: this._currentQueryParams
+				  })
+				: matchedRoute.route.title;
+			if (title) {
+				global.document.title = title;
+			}
 			while (matchedRoute) {
 				let { type, params, route } = matchedRoute;
 				let parent: RouteWrapper | undefined = matchedRoute.parent;

src/routing/interfaces.d.ts

@@ -15,6 +15,7 @@ export interface Route {
 	id: string;
 	path: string;
 	outlet: string;
+	title?: string;
 	params: string[];
 	segments: string[];
 	children: Route[];
@@ -35,6 +36,7 @@ export interface RouteConfig {
 	children?: RouteConfig[];
 	defaultParams?: Params;
 	defaultRoute?: boolean;
+	title?: string;
 }
 
 /**
@@ -207,9 +209,24 @@ export interface History {
 	readonly current: string;
 }
 
+/**
+ * Document title option
+ */
+export interface DocumentTitleOptions {
+	id: string;
+	params: Params;
+	queryParams: Params;
+	title?: string;
+}
+
+export interface SetDocumentTitle {
+	(options: DocumentTitleOptions): string | undefined;
+}
+
 export interface RouterOptions {
 	autostart?: boolean;
 	window?: Window;
 	base?: string;
 	HistoryManager?: HistoryConstructor;
+	setDocumentTitle?: SetDocumentTitle;
 }

tests/routing/unit/Router.ts

@@ -1,6 +1,8 @@
-const { describe, it } = intern.getInterface('bdd');
+const { it } = intern.getInterface('bdd');
+const { describe } = intern.getPlugin('jsdom');
 const { assert } = intern.getPlugin('chai');
 
+import global from '../../../src/shim/global';
 import { Router } from '../../../src/routing/Router';
 import { MemoryHistory as HistoryManager } from '../../../src/routing/history/MemoryHistory';
 
@@ -579,6 +581,27 @@ describe('Router', () => {
 		assert.isTrue(initialNavEvent);
 	});
 
+	describe('Document Title', () => {
+		it('should set the title as defined in the routing config', () => {
+			const router = new Router([{ id: 'foo', outlet: 'foo', path: 'foo/{id}?{query}', title: 'foo' }], {
+				HistoryManager
+			});
+			router.setPath('/foo/id-value?query=queryValue');
+			assert.strictEqual(global.document.title, 'foo');
+		});
+
+		it('should set the title as using the set document title callback', () => {
+			const router = new Router([{ id: 'foo', outlet: 'foo', path: 'foo/{id}?{query}', title: 'static-foo' }], {
+				HistoryManager,
+				setDocumentTitle({ title, params, queryParams, id }) {
+					return `${title}-${id}-${params.id}-${queryParams.query}`;
+				}
+			});
+			router.setPath('/foo/id-value?query=queryValue');
+			assert.strictEqual(global.document.title, 'static-foo-foo-id-value-queryValue');
+		});
+	});
+
 	describe('outlets', () => {
 		it('should match against all routes for an outlet', () => {
 			const router = new Router(