Mimicking the Facebook app's infinite stack in Ember.js

Ember routing works nicely when working with strict linear paths of resources. However, it's becoming more prevalent in mobile design for apps — such as the Facebook app — to use infinite stacks of multiple interconnected resources:

1. User starts in the feed.
2. Presses on a link to a user profile.
3. Navigates to user's list of friends.
4. Visits a new user profile.
5. Goes to any other types of resources such as posts, groups etc.
6. THEN can navigate all the way back with each page state persisted.

---

We start off in a known resource - let's say it's Facebook's news feed. In Ember, we'd define that route as:

this.route('feed');

But from there, we'd like to be able to visit any combination of our resources - whilst still maintaining the state of each route. The temptation is to solve the problem through some funky route solution, such as using catch-all route definitions:

{ path: '*' }

But that'd take some heavy path management as discussed here (or perhaps there's some method of utilising Tilde's router.js URL generation?!). But as per the illustrated example above, it would leave us with huge goddamn route paths:

/feed/users/:user_id/friends/users/:user_id/another_resource/:another_resource_id

Not that that's a problem in a mobile app, but I'm not sure if it's the optimal way of achieving this.

So that leads me to consider whether there's some method of dynamically creating outlets as stacks get deeper (akin to modals) - or whether the only way to achieve state persistence is using an app level object, Ember data or an Ember service to track history.

Anyway, tl;dr, I'm not desperately needing this functionality - just interested if anyone has a smart insight into how achieve this ...umm ... infinite interconnected nested resource stack thingy.