Pass values to route

Question

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)?

I think you should get this "image url" inside the `activate` method of the view-model — Fabio, Dec 14 '15 at 19:31
I haven't tried this, but have you looked here? https://github.com/aurelia/documentation/blob/master/English/docs.md#generating-route-urls 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: ${user.name} — peinearydevelopment, Dec 14 '15 at 19:32
Have a look at the Routing section of the docs http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.3/doc/article/cheat-sheet — conradj, Dec 15 '15 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 '15 at 15:44

score 13 · Accepted Answer · answered Dec 29 '15 at 06:23

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
}

answered Dec 29 '15 at 06:23

Sayem

6,079
4
22
26

Can you explain a bit more on what this line does?? `let userprofile = this.router.routes.find(x => x.name === 'userprofile');` – Danny Aug 10 '16 at 08:48
@Danny is that working? it throws error **routes of undefined** – sibi Aug 10 '16 at 10:38
i need to pass a array of value through router @Danny – sibi Aug 10 '16 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 '16 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 '16 at 11:13
@sibi Sorry, I don't understand. If it's already causing an error on the routes.find part, why would `this.theRouter.navigate()` be working fine in this example?? You would need to show me your code so I can see exactly what you're doing. You can't just import and inject it, you need to store it somewhere in this example. – Danny Aug 10 '16 at 11:58
Works like a charm here. Thumbs up! I was able to assign it a number but when the page received it, it was converted to a string. No biggie. – user441058 Sep 18 '16 at 06:37

score 3 · Answer 2 · answered Dec 04 '18 at 10:22

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.

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. — Bart Hofland, Aug 13 '20 at 14:13

Pass values to route

2 Answers2

Linked