import { customElement } from '@aurelia/runtime-html'; import { IRouter, IRouteViewModel, Params, route } from '@aurelia/router-lite'; @customElement({ name: 'ce-two', template: `ce2
instance id: \${id1}
activation id: \${id2}
routed param id: \${id} `, }) class CeTwo implements IRouteViewModel { private static id1: number = 0; private static id2: number = 0; private readonly id1: number = ++CeTwo.id1; private id2: number; private id: string; public canLoad(params: Params): boolean { this.id = params.id; this.id2 = ++CeTwo.id2; return true; } } @customElement({ name: 'ce-one', template: `ce1
instance id: \${id1}
activation id: \${id2}
routed param id: \${id} `, }) class CeOne implements IRouteViewModel { private static id1: number = 0; private static id2: number = 0; private readonly id1: number = ++CeOne.id1; private id2: number; private id: string; public canLoad(params: Params): boolean { this.id = params.id; this.id2 = ++CeOne.id2; return true; } } @route({ transitionPlan: 'replace', routes: [ { id: 'ce1', path: ['ce1/:id'], component: CeOne, transitionPlan: 'invoke-lifecycles', }, { id: 'ce2', path: ['ce2/:id'], component: CeTwo, transitionPlan: 'replace', }, ], }) @customElement({ name: 'my-app', template: `

`, }) export class MyApp { public constructor(@IRouter private readonly router: IRouter) {} private navigate( path: string, transitionPlan?: 'replace' | 'invoke-lifecycles' ) { void this.router.load( path, transitionPlan ? { transitionPlan } : undefined ); } }