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 so

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

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 3

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.

Answer 4

Ember has a RouterService since 2.15. It provides the name of the current route as currentRouteName property. A polyfill exists for Ember 2.4 - 2.14 if you are still on such an old version.

import Component from '@ember/component';

export default Component.extend({
  router: service(),

  isHomeRoute: computed('router.currentRouteName', function() {
    return this.router.currentRouteName === 'home';
  }),
});

All other solutions mentioned here are relying on private API that might already be deprecated / removed. Using RouterService is working at least up the current version, which is 3.12 at the time of writing this.

Please note that the "home" is not /. The root URL is called "index".

Answer 5

If you want to get current route in your component or controller you can inject routing service (routing: Ember.inject.service('-routing'))

(for more) and use:

this.get('routing.currentRouteName') or this.get('routing.currentPath')

Example with component and computed property:

import Ember from 'ember';

export default Ember.Component.extend({
  routing: Ember.inject.service('-routing'),

  checkMyRouteName: Ember.computed('routing.currentRouteName',  function() {
    return this.get('routing.currentRouteName');
  })
})

Example with controller and computed property:

import Ember from 'ember';

export default Ember.Controller.extend({
  routing: Ember.inject.service('-routing'),

  checkMyRouteName: Ember.computed('routing.currentRouteName', function() {
    return this.get('routing.currentRouteName');
  })
})

Current route in your route you just need this.routeName

Example with route:

import Ember from 'ember';

export default Ember.Route.extend({
  checkMyRouteName() {
    return this.routeName;
  }
})

Answer 6

Currently as of Ember 1.7.0 you can get the current route from within a route by calling this.routeName.