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

NOTE: as of Ember 3.16, the original answer is not only recommended, but observers are strongly discouraged.

To get the current route name, you can utilize the Router Service: https://api.emberjs.com/ember/3.18/classes/RouterService/properties/currentRouteName?anchor=currentRouteName

export default class MyComponent extends Component {
  @service router;

  get activeRoute() {
    return this.router.currentRouteName;
  }
}

---

Original answer below

---

You could observe the application's currentPath and set it to the current route accordingly when it changes:

App = Ember.Application.create({
  currentPath: '',
});

App.ApplicationController = Ember.Controller.extend({
  updateCurrentPath: function() {
    App.set('currentPath', this.get('currentPath'));
  }.observes('currentPath')
}),

This way you have access to the currentPath when ever you want with App.get('currentPath');

E.g.

if (App.get('currentPath') == 'home'){
  this.transitionTo(userLang);
}

Hope it helps.

Answer 2

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 3

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 4

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 5

Just as an update, in Ember 1.8.1, we can get the routeName inside an Ember.Route object by doing 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.

Answer 7

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 8

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 9

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 10

this worked for me on the route.js file: this.controller.target.currentPath

Answer 11

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')
{
// ...
}