# How to pass parameters between different routes (in Ember 2.x)?

**URL:** <https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095>\
**Category:** Uncategorized\
**Created:** [December 14, 2016, 6:38am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095 "2016-12-14T06:38:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 14, 2016, 6:38am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/1 "2016-12-14T06:38:43Z")

</div>

First of all, I’ve asked the question [at the SO](http://stackoverflow.com/questions/39286750/passing-parameters-between-routes-in-ember-2-x) at Sep 2. It didn’t get enough attention.

While going from one route to another, I want to pass some data (especcially arrays). How is it possible?

I’ve found some solutions with drawbacks:

- _by using query-params_: need to serialize, deserialize. Seems not suitable for different-sized arrays.

- _by using a service to store data_: it is not only available to routes, but available to whole app. It can be modified unintentially. Also it will not have a garbage remove mechanism. It stores the values from routes that was displayed far before.

- _by using transition object as promise_: It modifies the returning hash of `model` hook. Involves in someone else’s business.

- _by using transition object’s data attribute_: It fits well. The only problem we found is: it is not working on page refreshs. (Of course page refresh means to reload the whole SPA. But it is totally acceptable from the users’ perspective. Also using services may cause this problem.)

So, what is the suitable approach to passing parameters between different routes?

---

<div class="post-metadata">

**Author:** ![Vishu](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@Vishu](https://discuss.emberjs.com/u/Vishu)\
**Post date:** [December 14, 2016, 7:50am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/2 "2016-12-14T07:50:23Z")

</div>

Hi,

Try to store value in a mixin. And, Use that mixin.

It will help you.

Thanks

---

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 14, 2016, 11:13am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/3 "2016-12-14T11:13:20Z")

</div>

How? Isn’t it have the same drawbacks same with storing values in services?

---

<div class="post-metadata">

**Author:** ![beatle](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/beatle/32/13397_2.png) [@beatle](https://discuss.emberjs.com/u/beatle)\
**Post date:** [December 15, 2016, 12:01am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/4 "2016-12-15T00:01:04Z")

</div>

I believe service is all you need. If you need to invalidate some resources you should do it manually.

Could you provide some more context please? Do you need to share data between nested routes? Do you need to share the same resource by id? How does your router.js look like?

---

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 15, 2016, 5:45am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/5 "2016-12-15T05:45:14Z")

</div>

So, service drawbacks are:

- Unintential modification of data of other routes.
- Garbage collection is needed. ==\> as you suggested, I think manually removing is acceptable.
- At page refreshs, it doesn’t work.

---

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 15, 2016, 5:45am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/6 "2016-12-15T05:45:22Z")

</div>

To provide some more context:

- The routes are not used as nested.
- Need to pass a big json or ember object between routes
- router does only have model ids or query parameters.

---

<div class="post-metadata">

**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\
**Post date:** [December 15, 2016, 6:58am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/7 "2016-12-15T06:58:15Z")

</div>

You can pass query params directly from your {{link-to}}

[http://emberjs.com/api/classes/Ember.Templates.helpers.html#method\_query-params](http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_query-params)

---

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 15, 2016, 11:29am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/8 "2016-12-15T11:29:39Z")

</div>

It was one of the options, I’ve mentioned at the question:

> _by using query-params_: need to serialize, deserialize. Seems not suitable for different-sized arrays.

---

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 21, 2016, 7:13am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/9 "2016-12-21T07:13:49Z")

</div>

After all, I found that `query-params` is well suitable. But, I need to override `serializeQueryParam` and `deserializeQueryParam` hooks to send complex objects.

No matter in arrays, if I define them as the following in my route:

```
  queryParams: {
    arr:{
      type:'array'
    }
  },

```

As a workaround, I can send all complex objects in an array as following:

```
this.transitionTo('my-route', {queryParams:{[myComplexObject]});

```

Or I can override `serializeQueryParam` and `deserializeQueryParam` hooks. See my [question about overriding them](http://discuss.emberjs.com/t/are-serializequeryparam-and-deserializequeryparam-hooks-public/12127).

---

<div class="post-metadata">

**Author:** ![ykaragol](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@ykaragol](https://discuss.emberjs.com/u/ykaragol)\
**Post date:** [December 25, 2016, 10:28am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/10 "2016-12-25T10:28:46Z")

</div>

Further more about `query-params`: It has a feature “stickyness”. But actually it is not a feature, but a bug!

According to the guide:

> If you wish to reset a query param, you have two options:

> 1. explicitly pass in the default value for that query param into link-to or transitionTo.
> 2. use the Route.resetController hook to set query param values back to their defaults before exiting the route or changing the route’s model.

According to option 1: If you want add some queryParams to one of your route, you need to change all your current code that navigates to that route to reset your new query parameters. If you don’t do that, your route will open with your last query-params!

According to option 2: Actually, option 2 is not working in case of the current route is not changing. For example: You have a menu that is rendered by application.hbs and if user selects to go to the X route while at X route (with some query params), `resetController` hook will not work. And current query params are still be displayed. I saw some addons relying on this hook. But they cannot solve the problem of staying on the same route.

Anyway, if ones wrote an addon that tries to eliminate one of behaviours of the framework, isn’t it an indicator of that behaviour should be closed with a config parameter?

**EDIT:** Third option is to override one of the private methods of Router: [see working in twiddle](https://ember-twiddle.com/721962bb2975b3dab299b8cc7de39226?openFiles=initializers.router-modifier.js%2C). Method is: \__hydrateUnsuppliedQueryParams_

---

<div class="post-metadata">

**Author:** ![Jin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jin/32/18139_2.png) [@Jin](https://discuss.emberjs.com/u/Jin)\
**Post date:** [May 24, 2018, 12:30am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/11 "2018-05-24T00:30:40Z")

</div>

Assuming you have a products page where you can see 10 different products and you want to open multiple tabs together(new route). What method do you think fits in this use case? I need to keep the selected product data so a page refresh wouldn’t lose it. Would query-params be the right choice?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [May 24, 2018, 4:50am UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/12 "2018-05-24T04:50:51Z")

</div>

Yes, I think that sounds like a good place to user a query param.

---

<div class="post-metadata">

**Author:** ![Dan\_Nelson](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dan_nelson/32/11890_2.png) [@Dan\_Nelson](https://discuss.emberjs.com/u/Dan_Nelson)\
**Post date:** [November 19, 2018, 9:44pm UTC](https://discuss.emberjs.com/t/how-to-pass-parameters-between-different-routes-in-ember-2-x/12095/13 "2018-11-19T21:44:14Z")

</div>

I know this sounds kind of messy, but why not just add the complex `Object`/`Array` that you need in the next route directly into the new route’s model hash? Assuming of course your new route is returning an `RSVP.hash` from its model (easy refactor if it isn’t):

```javascript
// the route.js you're leaving
...
actions: {
  someActionThatTransitionsToNewRoute(complexObject) {
    this.transitionTo('some.new.route')
      .then((newRoute) => {
        newRoute.set('controller.model.complexObjectFromPreviousRoute', complexObject);
      });

    return true;
  }
}
...

```

It’s not a beautiful solution; but it is something you’re free to do during transitions. This will not work if the transition is opened in a new tab and it won’t do anything for page refreshes. I hope that’s obvious.

This is very convenient in passing complex information from route to route; usually improving your end-user’s experience.

Route intercourse isn’t pretty but it’s a means to an end 😉