URL 上的 Aurelia JS 尾部斜杠答案

【问题标题】：Aurelia JS Trailing Slash on URLsURL 上的 Aurelia JS 尾部斜杠
【发布时间】：2017-02-16 15:50:23
【问题描述】：

有没有人知道在 Aurelia 中在使用<a route-href="route: route_name; params.bind: {...}">${link.title}</a> 生成的 URL 上添加尾部斜杠的方法？

我已尝试修改 navModel，并在 routerConfig 中搜索了可以执行此操作的选项，但没有找到。

PS：我正在使用 HTML5 pushState 并已删除哈希。

config.options.pushState = true;
config.options.hashChange = false;

更新

我最终以router:navigation:complete 事件为目标来实现这一目标。在我看来这是一个丑陋的黑客，但如果给了我我需要的东西：

this.eventAggregator.subscribe('router:navigation:complete', 
    if (!/\/$/.test(window.location.pathname)) {
        window.history.replaceState({}, document.title, window.location.pathname + '/');
    }
});

【问题讨论】：

您是否尝试在路由配置中添加斜杠？
这里的不同情况：我正在使用 FB.getLoginStatus 并且我只需要根 URL（似乎 FB 重定向 URI 总是用斜杠扩展）。我在主路由中尝试了 '' 和 '/' - URL 总是没有尾部斜杠。
顺便说一句：你把订阅代码放在哪里了？
我已经在我的主应用程序类的constructor 中添加了那段代码。我使用该单例来存储应用程序状态。

标签： router aurelia slash trailing

【解决方案1】：

您可以在 params.bind 末尾添加+'/'。像这样：

<a route-href="route: route_name; params.bind: {... + '/'}">${link.title}</a>

【讨论】：

这似乎可行，但我正在寻找一种更可配置的解决方案，该解决方案还针对没有 params 的路线，并且不需要在 @987654324 的所有位置进行手动更新使用@。
是的，我知道你的意思。还没有找到更优雅的解决方案喷气机。到目前为止，我已经将/ 放在一个常量中以逃避您提到的问题。如果您找到更好的解决方案，请发布。

【解决方案2】：

Aurelia 路由器（准确地说是 AppRouter 扩展了 Router）允许使用管道，这似乎是在路由更改时执行某些操作的理想场所（例如授权用户、滚动到顶部或添加斜杠）。

可能的用法如下：

import {PLATFORM} from 'aurelia-pal' // in case you use webpack

export class App {
  configureRouter(config, router) {
    config.title = 'Page title'
    config.options.pushState = true
    const preRenderStep = {
      run(navigationInstruction, next) {
        window.history.replaceState({}, document.title, window.location.pathname + '/');
        return next();
      }
    }

    config.addPreRenderStep(preRenderStep)
    config.map([
      {
        route:    [''],
        title:    'Home',
        name:     'home',
        moduleId: PLATFORM.moduleName('home'),
      },
    ])
  }
}

也许可以修改 navigationInstruction 中的一些道具（可能在另一个管道步骤中 - preRender 似乎为时已晚）并完全摆脱替换历史状态。不过，我还没有检查过。

【讨论】：