Router-lite href generation incorrect

My Routes:

{ id: 'domains', path: 'domains', component: () => import('./resources/routes/domains'), title: 'Domains'},
{ id: 'members', path: 'members', component: () => import('./resources/routes/members'), title: 'Members' }

Anchor Tag on domains view:

<a load="route:members;  params.bind: {daa: 1};">...</a>

Produces this in the code:

<a href="/#/domains/members(daa=1)"> ... </a>

This is incorrect. It should be: /#/members?daa=1

If I switch load with this:


Get an error as the url fragement is missing` in the route.


and click on it, then it navigates to the correct route. However, the url in the browsers url bar is this:


Further, If i try using router.load

this.router.load('members', {
  queryParams: { d1: 'test1' }

This creates the same weird route as above:


What’s going in here? Am I doing something wrong?

Can you please try this?

<a load="route:../members;  params.bind: {daa: 1};">...</a>

This creates the same weird route as above:


The positioning of hash is correct. At least that’s how the URL API formats the URLs. You can try this yourself.

var u = new URL(''); = "d1=test1";
u.hash = "/members"
console.log(u.href); //


Added this:

<a load="route:../members;  params.bind: {daa: 1};">...</a>

Get this:

<a href="/?daa=1#/members"> ... </a>

Maybe I am misunderstanding, the hash should only be #, members is the route.

Should it not be:

So here is what’s happening.

Your route does not contain a parameter; at least not the one you are binding to the load. Thus, these parameters are added to the querystring. Moreover, because you are preferring hashes in your URLs, your component routes/paths are appearing as URL hash. Now when everything is feed to the URL API, it looks loosely like below.

var u = new URL(''); = "d1=test1"; //<-- the parameters as query
u.hash = "/members" // <-- the component path as route

Now when you ask the URL API to produce the final href it looks like below.


Note that, the URL API puts the hash at the end of the URL. That’s the standard way it formats the URLs. The router-lite does not have much influence on that, it just uses the URL API, as a standard way of parsing, and managing the URLs.

Cool, thanks for the explaining this :slightly_smiling_face:.

Now bear with me here, I do not think that this works for hash based routing.

When adding a hash using the URL API, it gets added to the end of the url string.

const url = new URL(
url.hash = Examples


This is used to reference the element with an id set to Examples on the page.

Now what If I would like to do something like this in Aurelia (

Also there is an inconsistency when comparing to @aurelia-router

When using something like this (with hash based routing):

router.load('members', { parameters: { d1: 'test1' } })

It produces this url:

Where as in router-lite

router.load('members', { queryParams: { d1: 'test1' } })

produces this:

Also the queryParams (d1=test) in the members route loading hook are missing

loading(params) {
  // just an empty object although we navigated 
  // to this route using 
  // router.load('members', { queryParams: { d1: 'test1' } })

We are also discussing this issue internally, and I am inclining towards changing this behaviour. Thanks for reporting this!

1 Like