Passing Through Data In Your Aurelia Routes

On a per route basis you might want to configure some additional route specific data that you can access in your view. For example a route might have an icon for your navigation menu. This actually came up in the Aurelia Gitter chatroom and I decided to do a quick little write up.

Say hello to a little unknown property called settings

Added all the way back in February 2015 when Aurelia was still a tiny blip on the Javascript radar was this property which allows you to define an object of additional properties for a route, similar to how Durandal does it.

Defining a basic route
Nothing out of the ordinary here except for the settings object being passed as an additional parameter on our defined route.

configureRouter(config, router) {
    config.title = 'Test Route';
    config.options.pushState = true;

    config.map([
        {
            route: ['', 'welcome'],
            name: 'welcome',
            moduleId: './welcome',
            title: 'Welcome',
            settings: {
                icon: '/images/icons/welcome-icon.svg'
            }
        }
    ]);

    this.router = router;
}

Accessing the settings data
Taking part of the nav-bar.html partial from the Aurelia Skeleton Navigation app, we can now access our additional values passed in through the predefined route.

<ul class="nav navbar-nav">
  <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
    <img src="${row.settings.icon}">${row.title}
  </li>
</ul>

It is worth noting that you do not have to use the settings param, you can just add them inline instead. However, this means if in future the Aurelia team add new configuration options to a route and they pick the same name as you, it will cause some headaches. The settings object namespaces your values and ensures they’re always there.