Aurelia 2 router: Re-use components with different route configuration

vNext
1

Greetings.
As a personal experiment, I am trying to build a simple library application with Aurelia 2.
The application has several configuration pages which share the exact same logic, with the only difference being the API path that their actions should call.

This is how I have configured the routes (with configured routing) in the main application shell:

import { route, Routeable, RouteConfig } from "aurelia";

const routes: Routeable[] = [
    {
        id: "authors",
        path: "authors",
        component: import("./pages/indexPage"),
        transitionPlan: "replace",
        title: "Autori",
        data: { path: "author" }
    },
    {
        id: "genres",
        path: "genres",
        component: import("./pages/indexPage"),
        transitionPlan: "replace",
        title: "Generi",
        data: { path: "genre" }
    }
];

@route({ routes: routes })
export class ApplicationRoot {
}

This is the application startup:

Aurelia
  .register(RouterConfiguration.customize({
    useUrlFragmentHash: false,
    useHref: true,
    routingMode: "configured-only",
    sameUrlStrategy: "reload"
  }))
  .app(ApplicationRoot)
  .start();

And this is roughly how the routed pages work:

async canLoad(_, next: RouteNode) {
    const path = next.data.path;
    // fetch data from the path
}

This does work, but navigation between pages fails (the hooks are not even triggered), I assume because they share the same component and differ only in parameters.

(I doubt all of the parameters are needed, but since the documentation is currently lacking I tried what I found in the typings. Furthermore, useUrlFragmentHash: true does not seem to work and I am not sure what useHref is meant to do.)

Since this is a common use case in the application I work to maintain (which we plan to eventually migrate to Aurelia 2 when it will be stable), I would like to know if what I am trying to do is supported.

1 Like
2

Did you ever find an answer to this? I am trying out a similar scenario and am having routing problems. For starters, the data I pass into the route is not making it into the Params of the component handling the route:

{ path: 'item/:slug', data: { type: 'movie' }, component: import('./title/title') }

in title.ts:

export class Title {
  load(params: Params) {
    console.log(params.type);
    console.log(params.slug);
  }
}

prints the slug (passed in the url) but the type is null.

3

The use case here (or at least something similar) can be achieved with direct routing in the Aurelia Direct Router as seen in this gist. Bottom line is

<!-- my-app.html -->
<import from="./common"></import>

<a load="authors">Authors</a>
<a load="genres">Genres</a>

<au-viewport></au-viewport>

// common.ts
import { customElement } from 'aurelia';

@customElement({
  name: 'authors',
  aliases: ['genres'],
  template: '<h2>Type: \${type}</h2>',
})
export class Common {
  public type;
  
  public load(_params, instruction) {
    this.type = instruction.component.name;
  }
}