How to link to an element that has both a param and non-param route


So in the Router I kinda have something that looks like us.

  this.route('contact', { path: '/contact/:product_id'});

The way our website works is if a user clicks on the “Request a Sample” from a certain product’s page, that page will put the product’s id into the URL and then the contact form will autofill the product the user is requesting a sample for. I have it set up like this in my product’s page.

{{link-to 'contact' myProductID} class="btn btn-primary btn-lg"}`

The problem is that the productID is clearly not being passed. I suspect this is because “link-to” only uses the URL of the last this.route(‘contact’) defined. Therefore it assumes I don’t require any parameters. I could make the contact route require a product_id, but the problem is that there are several links which don’t use any parameters.

Is there a way for {{link-to}} to specify that I want to use this.route('contact', { path: '/contact/:product_id'}); instead of this.route('contact');?


I’m on my phone on the seat of a tractor and don’t have code in front of me to show a snippet, but ‘yes’.

The route syntax is nestable.



You have two routes with the same name. Routes must have unique names.


That’s because their supposed to link to the same route.

It’s just that I want one that links without any arguments and another that links with arguments.


If it’s exactly the same form then it should have the same URL. You should look at using query parameters instead, i.e. /contact?product=1