Ember: get target url from afterModel

Question

I have two paths pointing to the same route:

this.route('items', { path: ':fruitName/rotten' });
this.route('items', { path: ':fruitName' });

I am trying to get the current URL from within the afterModel hook of the /items/fruitName route. If I use this.get('router.url'), it will give me the previous URL before the transition. I need to detect if the target has 'rotten' at the end of the path.

I found that transition.intent.url has the path as a string, but only when its manually entered into the browser. If I click a link to transtion, transition.intent.url is undefined.

How can I determine if the transition URL is /items/fruitName/ or /items/FruitName/rotten?

the obvious question: why just don't use the same route twice? — Lux
@Lux, I have two tabs on my page and I need to target them with the paths defined above. I also do not want to use query params as my site uses all url params and it would be an irregularity. — user6041966
but why do you use the same route for both tabs? Just use two routes! — Lux

kubz kubz · Accepted Answer · 2017-07-13T09:00:11

Before determine which url you have, my question is : how do you make a transition with a different url to the same route (by using {{link-to}}) ?

In your case, you have the same route for 2 different purpose, I understand what you want to accomplish but you will break ember rules (which force you to make a bad design).

You can accomplish what you want to do by using nested routes. let me explain:

/:fruitName and /:fruitName/rotten have the same base (same data): a page for a fruit but in the rotten route, you want to display in another tab.

It's a design problem not a route problem, you can make the most of nested route to:

use index to display main content
subroute to display other thing

you can check an example here with a basic css tab.

Ember: get target url from afterModel

2 Answers