Aurelia 路由配置问题答案

【问题标题】：Aurelia routing configuration issueAurelia 路由配置问题
【发布时间】：2015-05-28 11:40:09
【问题描述】：

当路径像 layer1/layer2 而不仅仅是 layer1 时，我在配置 Aurelia 路由时遇到问题。这是项目文件结构（dist下的文件是根据src文件夹下的文件自动创建的）

dist
    | - home
        | - home.html
        | - home.js
    | - user
        | - register.html
        | - register.js
    app.html
    app.js 
    main.js 
src
    | - home
        | - home.html
        | - home.js
    | - user
        | - register.html
        | - register.js
    app.html
    app.js 
    main.js

当我执行以下操作时，它就可以正常工作：

app.html

<template>
  <div>
    <a href="user">register user</a>
    <a href="otherlink">otherlink</a>
  </div>
  <div class='main'>
    <router-view></router-view>
  </div>
</template>

app.js

this.router.configure(config => {
  config.title = 'demo';
  config.options.pushState = true;
  config.map([
    // home routes
    { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' },

    // User register
    { route: ['user'], moduleId: './user/register', nav: true, title:'Register User'}
  ]);
});

但是当我将路径从 user 更改为 user/register 如下所示时，它不再起作用

app.html

<template>
  <div>
    <a href="user/register">register user</a>
    <a href="otherlink">otherlink</a>
  </div>
  <div class='main'>
    <router-view></router-view>
  </div>
</template>

app.js

this.router.configure(config => {
  config.title = 'demo';
  config.options.pushState = true;
  config.map([
    // home routes
    { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' },

    // User register
    { route: ['user/register'], moduleId: './user/register', nav: true, title:'Register User'}
  ]);
});

在 chrome 调试器中，我看到了这个错误：

GET http://localhost:9000/user/dist/user/register.html 404（未找到）

请注意，不知何故，一个额外的 user 被添加到 url，导致无法找到 register.html 文件。同样，当我只是使用 user 作为路由时，它可以正常工作而没有任何错误，但是当我只是从 user 更改为 user/register 时，它不再起作用了。

有人可以告诉我为什么会发生这种情况以及如何解决吗？

【问题讨论】：

标签： routing aurelia

【解决方案1】：

~~将链接的href 更改为href="#/user/register"，这应该会为您解决问题。~~

我没有看到您启用了 pushState。请编辑您的index.html 并添加

<base href="http://localhost:9000/">

或者无论你的根 url 是什么。这应该可以为您解决问题。

【讨论】：

感谢您的回复。然而这并没有奏效。我们添加了 config.options.pushState = true 以从 url 中删除 # 符号，因此 localhost:9000/user 可以在没有 # 的情况下访问。但是，即使由于某种原因将路由设置为 user/register，我们也无法使 localhost:9000/user/register 工作。

【解决方案2】：

我对 Ashley 的回答做了一个小改动，这使得更加环保，因为我们不需要硬编码本地 url。我测试过，效果也很好。

<base href="/">

【讨论】：