在 Ember 中获取当前路线名称

Question

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

this.transitionTo(userLang);

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

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

Answer 1

注意：从 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')
}),

这样您就可以随时使用App.get('currentPath'); 访问currentPath

例如

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

希望对你有帮助。

Answer 2

Ember 自 2.15 起拥有RouterService。它提供当前路由的名称为currentRouteName property。如果您仍在使用这么旧的版本，则 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 3

这在 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 4

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

（对于more）并使用：

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 命名空间 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 6

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

从任何路由获取

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 7

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

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 8

您可以简单地解析当前 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')
{
// ...
}

Answer 9

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

Answer 10

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