在 Ember 中获取当前路线名称

Question

我需要在我的 ember 应用程序中获取当前路线名称； 我试过这个： Ember App.Router.router.currentState undefined但它对我不起作用（有可能我错过了一些东西......）我使用 Ember rc6 并且我有一个多语言应用程序； 在 applicationRoute 中，我检测浏览器的语言，然后重定向到正确的页面：

this.transitionTo(userLang);

但我希望仅当用户在主页上时才执行此操作，因此如下所示：

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

Answer 1

这在 1.3.0-beta 上对我有用（快速浏览 1.1.2 的源代码表明它也可以在那里工作）：

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

请注意，文档指出：

目前，它依赖于浏览器中存在的 hashchange 事件。

但是，我认为强烈建议不要在生产代码中使用App.__container__ 。 更可接受的替代方法是使用App.Router.router.currentHandlerInfos ，它提供有关当前 Ember 路由的信息。

另一个选项是ApplicationController上的currentRouteName 。 您可以添加needs: ['application']到您的控制器，然后访问路由名称controllers.application.currentRouteName 。 这将返回类似posts.index 。

Answer 2

注意：从 Ember 3.16 开始，不仅推荐原始答案，而且强烈不鼓励观察者。

要获取当前路由名称，您可以使用路由器服务： 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;
  }
}

---

原答案如下

---

您可以观察application的currentPath并在其更改时将其相应地设置为当前路由：

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

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

这样，您就可以访问currentPath当过你想要App.get('currentPath');

例如

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

希望能帮助到你。

Answer 3

随着向组件的转变，获取路由名称变得更加困难。 最好的方法是添加一个初始化程序，例如

ember g initializer router

（从命令行），和

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

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

在初始化程序/router.js 中。 如果需要，您也可以注入控制器。 然后简单地做

this.get('router.currentRouteName');

在 JS 中，或

{{router.currentRouteName}}

在模板中。

这是我发现在 Ember 2.4 中可靠且可观察的唯一方法

Answer 4

如果你想在你的组件或控制器中获取当前路由，你可以注入路由服务（ routing: Ember.inject.service('-routing') ）

（ 更多）并使用：

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

具有组件和计算属性的示例：

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');
  })
})

带有控制器和计算属性的示例：

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');
  })
})

您路线中的当前路线您只需要this.routeName

路线示例：

import Ember from 'ember';

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

Answer 5

作为更新，在 Ember 1.8.1 中，我们可以通过执行this.routeName来获取 Ember.Route 对象中的this.routeName 。

Answer 6

目前，从 Ember 1.7.0 开始，您可以通过调用this.routeName从路由中获取当前路由。

Answer 7

Ember 命名空间 API 现在有一个getOwner方法，这对于查找currentRouteName或其他路由属性非常有用。

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

我创建了一个Ember Twiddle示例来演示。 使用“输出”窗格上方的文本输入来点击其他路线，如/blue 、 /green或/red 。

Answer 8

Ember 从 2.15 开始就有了RouterService 。 它提供当前路由的名称作为currentRouteName属性。 如果您仍在使用如此旧的版本，则存在用于 Ember 2.4 - 2.14 的polyfill 。

import Component from '@ember/component';

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

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

这里提到的所有其他解决方案都依赖于可能已经被弃用/删除的私有 API。 使用RouterService至少可以运行当前版本，在撰写本文时为3.12 。

请注意， "home"不是/ 。 根 URL 称为"index" 。

Answer 9

我有一段时间遇到了同样的问题。 然后我开始探索路由器。 它总是有一个状态对象，可以从任何路由使用

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

而已。 现在您有了当前的路线名称！

如果你想要当前的路线参数，

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

Answer 10

您可以简单地解析当前 URL。 这样你就可以使用你的完整网址，例如：

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

并从此字符串中提取后缀：

/home

这是当前的路线名称。

一个简单的 JS 函数（不管你的 Ember 版本如何都有效）将是：

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;
}

使用示例：

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