对多个嵌套的 ember 路由使用相同的 URL答案

【问题标题】：Using the same URL for multiple nested ember routes对多个嵌套的 ember 路由使用相同的 URL
【发布时间】：2017-11-21 22:05:26
【问题描述】：

我有一个使用 Ember 的案例，我想让顶级 URL 可用（即 localhost:4200/demo），并让下面的所有路由也显示相同的 URL（localhost:4200/demo）。所以路由文件，如果可能的话，应该是这样的：

this.route('demo', function() {
  this.route('one', { path: '/' });
  this.route('submit', { path: '/' });
});

我知道可以为整个应用设置ENV.locationtype，但是有没有办法为父 URL 下的特定 URL 有条件地设置它？

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

通常，当您最终遇到这样的主要障碍时，这是因为 Ember 隐含地试图告诉您您所做的不是一个好主意。

您不希望您的子路由以任何方式影响 URL 是否有特殊原因？如果您的主要目的是混淆事物，您能否在 URL 中使用随机值？

Ember 使用 URL 来确定应用中的内容应该处于什么状态。如果您根本不想使用路由，则不必这样做，但是此时您正在处理嵌套的组件层次结构，您必须在自己之间切换。这本质上类似于在没有路由器的情况下使用 React ...

【讨论】：

我同意。已决定不修改 history_location.js 文件，而是走上提高动态组件可读性和结构的道路。

【解决方案2】：

默认情况下，Ember 可以管理 URL，或者可以将其设置为不管理它们，但似乎期望的意图是让它在单个环境中同时执行这两种操作，这在逻辑上是不允许的。

如果为 ENV.locationtype 声明了 none，则 Ember 的默认 URL 管理将关闭。这是一个“环境范围”的配置。

如果 Ember 路由器用于映射嵌套路由，并且默认 URL 管理正在发挥作用，那么请注意，您不能为多个同级子路由定义相同的 URL 路径。

进一步观察，您上面的尝试是利用由single index route 管理的功能，该功能在路由器映射中的每个嵌套级别都可用。但是，一个路由不能有多个index 路由。只有最后一个定义的会被识别。

Router.map(function() {
  this.route('demo', function() {
    this.route('one', { path: '/' })    // <-- this is over-ridden by "submit"
    this.route('submit', { path: '/' }) // <-- this defines an "index" route for demo
  })
})

【讨论】：

我也这么认为，但根据文档，ENV.locationtype 可以设置为 none - guides.emberjs.com/v2.11.0/configuring-ember/…。因此，这表明在 packages/ember-routing/lib/system/router.js 中设置 URL 的 EmberRouter 可以在应用程序级别进行自定义和覆盖，从而保留核心约定。
好吧，我想尽可能少地干扰 ember 路由，并且仍然使用像 {{link-to}} 这样的所有助手和对象点符号来引用路由。路由函数中的 { path: '/string' } 对象已经覆盖了默认的 URL 结构，因此将其提交给父路由似乎是可行的。可能必须推出一个添加 { useParent: true } 对象或类似对象的插件。希望可能有现有的功能，或者有人做过类似的事情。
@Ezra 我已经更详细地更新了答案。我希望这有助于澄清。
干杯@jacefarm。我仍在进行调查。看起来 ember.js 核心 packages/ember-routing/lib/location/history_location.js 包含管理路径的所有功能，但它们都是私有的。所以看起来我将不得不在自定义插件或类似插件中复制/覆盖它们。