Question

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

我已尝试修改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 + '/');
    }
});

Answer 1

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

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

Answer 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似乎为时已晚），并摆脱了完全替换历史状态的麻烦。我还没有检查。

Aurelia JS跟踪URL的斜杠

2 个答案: