Get current route name in Ember

Question

I need to get the current route name in my ember application; I tried this: Ember App.Router.router.currentState undefined but it doesn't work for me (there is probablig something i'm missimg...) I use Ember rc6 and I have a multilingual app; in the applicationRoute I detect the browser's language and I redirect to the correct page with:

this.transitionTo(userLang);

but I would like this to be executed only when user are on the home page, so something like this:

if (currentRoute == 'home'){
  this.transitionTo(userLang)
}

Answer 1

This worked for me on 1.3.0-beta (and a quick glance at the source for 1.1.2 suggests it would work there too):

App.__container__.lookup('router:main').location.lastSetURL

Note that the documentation states:

At present, it relies on a hashchange event existing in the browser.

However, I believe it's strongly suggested that App.__container__ not be used in production code. A more acceptable alternative would be to use App.Router.router.currentHandlerInfos, which provides information on the current Ember route.

Yet another option is currentRouteName on the ApplicationController. You can add needs: ['application'] to your controller, then access the route name with controllers.application.currentRouteName. This will return something like posts.index.

Answer 2

With the shift to components, it is harder to get route name. The best way is to add an initializer such as

ember g initializer router

(from command line), and

export function initialize(application) {
  application.inject('route', 'router', 'router:main');
  application.inject('component', 'router', 'router:main');
}

export default {
  name: 'router',
  initialize
};

in a initializers/router.js. You can also inject into controller if you need to. Then just do simply

this.get('router.currentRouteName');

in JS, or

{{router.currentRouteName}}

in template.

This is the only way I have found to get it reliably, and observable in Ember 2.4

Answer 3

Just as an update, in Ember 1.8.1, we can get the routeName inside an Ember.Route object by doing this.routeName.

Answer 4

I had the same problem for a while. then i started exploring router. It always have a state object which can be obtained from any route using

var route = this;
var handlerInfos = route.get("router.router.state.handlerInfos");
var currRouteHandlerInfo = handlerInfos[handlerInfos.length-1];
var currRouteName = currRouteHandlerInfo.name; //"home"

that's it. Now you have the current route name!

if you want the current route params,

var routerParams = this.get("router.router.state.params");
var currRouteParams = routerParams[currRouteName]; //{ homeId : "1" }

Answer 5

You can simple parse the current URL. This way you can use your full url for example:

http://127.0.0.1:8000/index.html/#/home

and extract from this string the suffix:

/home

which is the current route name.

A simple JS function (that works regardless to your Ember version) will be:

function getCurrentRoute()
{
    var currentRoute;
    var currentUrl = window.location.href; // 'http://127.0.0.1:8000/index.html/#/home'

    var indexOfHash = currentUrl.indexOf('#');
    if ((indexOfHash == -1) ||
        (indexOfHash == currentUrl.length - 1))
    {
        currentRoute = '/';
    }
    else
    {
        currentRoute = currentUrl.slice(indexOfHash + 1); // '/home'
    }

    return currentRoute;
}

Example of use:

if (getCurrentRoute() == '/home')
{
// ...
}

Answer 6

The Ember namespace API now has a getOwner method, which is very useful for looking up the currentRouteName, or, other route properties.

  const owner        = Ember.getOwner(this);
  const currentRoute = owner.lookup('router:main').currentRouteName;
  const routeInfo    = owner.lookup(`route:${currentRoute}`).get('info');
  // etc.

I've created an Ember Twiddle example to demonstrate. Use the text input above the "Output" pane to hit other routes like /blue, /green, or /red.