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

Help Requests
1

Hi,

I can’t find a solution for a problem I have with the Contact manager Tutorial:
http://aurelia.io/docs/tutorials/creating-a-contact-manager

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 ?
and/or:
(How) can I configure the route mapping to respond to urls like: contacts?id=3 ?

Thanks in advance!

2

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

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

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

3

Thank you, @jeffgrann for your reply!

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

returns urls like this:
#/contacts?id=3

I ‘fixed’ the issue for now by replacing the above binding with:
href="#/contacts/${contact.id}"

Which returns the intended:
#/contacts/3

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)

4

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?

5

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

6

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
7

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

2 Likes
8

Thank you, @justcoding!

This did it:

I was referencing an incorrect route!

@jeffgrann, also thanks for your time!