Routing problem: contacts/3 vs contacts?id=3


I can’t find a solution for a problem I have with the Contact manager Tutorial:

My router responds well to urls like: contacts/3 etc. (since the route in the mapping is contacts/:id)

But the contact-list renders hrefs like this: contacts?id=3

(How) can I configure the way the dynamic anchor binding is being rendered like: contacts/3 ?
(How) can I configure the route mapping to respond to urls like: contacts?id=3 ?

Thanks in advance!

Looking at the tutorial, it looks like the route is generated with:

route-href="route: contacts; params.bind: {}"

This should produce a url with contacts/3. Are you saying it doesn’t?

Thank you, @jeffgrann for your reply!

Indeed: in my setup, this binding:
route-href="route: contacts; params.bind: {}"

returns urls like this:

I ‘fixed’ the issue for now by replacing the above binding with:

Which returns the intended:

But I prefer to use the correct binding, instead of my ugly hack…

(My setup consists of an Aurelia app, which I generated with the command dotnet new aurelia
in which I copy-pasted the code of the Aurelia Contact Manager Tutorial)

Hmm. route-href should produce contacts/3 since the route is defined as route: 'contacts/:id' in app.js. Have you checked to make sure the route is defined this way?

Just looked at your original post and it looks like you have already checked how the route is defined. I’m stumped.

My routes are defined as:

       route: "contacts",
       name: "contacts",
       settings: { icon: "user" },
       moduleId: PLATFORM.moduleName("../contacts/contacts"),
       nav: true,
       title: "Contacts"
   }, {
       route: "contacts/:id",
       name: "contact-detail",
       moduleId: PLATFORM.moduleName("../contacts/contact-detail"),
       nav: false

You’re using the wrong route when generating the url. Try contact-detail:
route-href="route: contact-detail; params.bind: {}


Thank you, @justcoding!

This did it:

I was referencing an incorrect route!

@jeffgrann, also thanks for your time!