11

I have a list of items. When the user clicks on an item, the user will be taken to item details page.

I want to pass an object containing item details(like item's image URL) to the route. However, I don't want to expose it in the routes url.

If there were a way to do something like <a route-href="route: details; settings.bind({url: item.url})">${item.name}</a> that would be gold.

I have seen properties can be passed to a route if defined in the route configuration. However, I don't know how to change that from the template. Another way could be is to define a singleton and store the values there and inject the object to the destination route.

Is there a way to pass values to routes from view (like angular ui-routers param object)?

4
  • I think you should get this "image url" inside the activate method of the view-model
    – Fabio
    Dec 14, 2015 at 19:31
  • 1
    I haven't tried this, but have you looked here? github.com/aurelia/documentation/blob/master/English/… Based on the docs, it looks like it might add that to the url, but I'm unclear about it. They have something like this in there: <a route-href="route: userDetail; params.bind: { id: user.id }">${user.name}</a> Dec 14, 2015 at 19:32
  • Have a look at the Routing section of the docs aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.3/doc/…
    – conradj
    Dec 15, 2015 at 11:28
  • The objective is to not pass them as url parameters. While passing objects to another route, I don't want them to be exposed in the url.
    – Sayem
    Dec 16, 2015 at 15:44

2 Answers 2

13

Okay so I figured out a way to achieve something closer to what I wanted:

Objective: Pass data to route without exposing them in the location bar.

Let's say, we have a list of users and we want to pass the username to the user's profile page without defining it as a query parameter.

In the view-model, first inject Router and then add data to the destination router:

goToUser(username) {
    let userprofile = this.router.routes.find(x => x.name === 'userprofile');
    userprofile.name = username;
    this.router.navigateToRoute('userprofile');
}

Now when the route changes to userprofile, you can access the route settings as the second parameter of activate method:

activate(params, routeData) {
    console.log(routeData.name); //user name
}
7
  • Can you explain a bit more on what this line does?? let userprofile = this.router.routes.find(x => x.name === 'userprofile');
    – Danny
    Aug 10, 2016 at 8:48
  • @Danny is that working? it throws error routes of undefined
    – sibi
    Aug 10, 2016 at 10:38
  • i need to pass a array of value through router @Danny
    – sibi
    Aug 10, 2016 at 10:43
  • @sibi It is working, but the problem is that the userprofile.name is a string and can't contain anything other than a string. There is another solution to this if you're passing in an array. Also, that error you're getting, I'm having a good guess that you're not injecting it and storing it to your class??
    – Danny
    Aug 10, 2016 at 10:52
  • @danny ok, leave that array, for string, i imported and injected Router, and this.theRouter.navigate() is working fine. According to above ans, what about routes let userprofile = this.router.routes.find(x => x.name === 'userprofile'); in this line routes throws the error, as routes of undefined.
    – sibi
    Aug 10, 2016 at 11:13
3

For those @Sayem's answer didn't worked, you can put any additional data (even objects) into setting property like this:

let editEmployeeRoute = this.router.routes.find(x => x.name === 'employees/edit');
editEmployeeRoute.settings.editObject = employeeToEdit;
this.router.navigateToRoute('employees/edit', {id: employeeToEdit.id});

So editObject will be delivered on the other side:

activate(params, routeConfig, navigationInstruction) {
    console.log(params, routeConfig, navigationInstruction);
    this.editId = params.id;
    this.editObject = routeConfig.settings.editObject;
}

hopes this helps others encountering same problem as me. TG.

1
  • 1
    I am pretty new to Aurelia, so I cannot say anything about the period 2015/2016 from which @sayem's original question and answer originate, but after reading the Aurelia docs and forum, I assume that your solution is nowadays the right way to go. Aug 13, 2020 at 14:13

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.