• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Passing Through Data In Your Aurelia Routes

Aurelia 1, Javascript · February 8, 2016

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.

Dwayne

Leave a Reply Cancel reply

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
allen joslin
allen joslin
6 years ago

but how can I access those settings in my module .js file

0
allen joslin
allen joslin
6 years ago

ah, adding parameters (b,c,d,e,f,g) to the activate call I see (after changing the names to be more indicative)

activate( urlParams, routeMap, navInstr )

thanks for your blog, I’ve been reading it — and bought you book, that’s good too!

(I wish I could figure out how to search the API to find the function signature for activate() among others…)

0
Dwayne
Dwayne
Author
Reply to  allen joslin
6 years ago

@Allen

Yep. As you discovered settings are available via the activate method. The second parameter should give you what you want. I’ll update the post to reflect accessing the object.

0
Navya
Navya
5 years ago

Hey Dwayne,
I tried to show my help button in the right side of the nav-bar using settings but its not working
{ route: ‘help’, name: ‘help’, moduleId: ‘./help’, layoutView: ‘app/layout-toolbar.html’, nav: false, title: ‘Help’ settings:{ isRightNav:true }}

0
Navya
Navya
5 years ago

${row.title}

0
Andrew
Andrew
4 years ago

Thanks Dwayne, is there a way to pass arbitrary values?

For example, say I’m creating a selection menu and I’m looping through a collection of objects to generate links, can I include the object Id in routeConfig or navModel such that it doesn’t show in the browser’s address bar? I’ve tried `settings.bind` in the link but the values aren’t changed.

Thanks :o)

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz