Links in Aurelia

Creating links in Aurelia is really easy:

1

<a route-href="route: dashboard">Dashboard</a>

This generates something like: http://localhost:8080/dashboard

By using route-href we can easily map the url to a router path in the router configuration.

But what if we want to pass some extra parameters? To generate something like: http://localhost:8080/dashboard?id=49

1

<a route-href="route: dashboard; params.bind:{id:49};">Dashboard</a>

And if we want to get something like: http://localhost:8080/dashboard/49

1

<a route-href="route:dashboard; params.bind:{id:49}; {options: absolute}">Dashboard</a>

How about doing redirections? Also easy:

1
2
3
4

this.router.navigateToRoute(
    'foods',
    { id: 10}
);

or

1
2
3
4
5

this.router.navigateToRoute(
    'foods',
    { id: response.data.id },
    { absolute: true } // absolute urls
);

Simple and easy :)