Question

当 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

＆＃13;

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

＆＃13;

app.js

＆＃13;

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'}
  ]);
});

＆＃13;

但是，当我将路径从用户更改为用户/注册时，如下所示，它将不再有效

app.html

＆＃13;

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

＆＃13;

app.js

＆＃13;

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'}
  ]);
});

＆＃13;

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

获取http://localhost:9000/ 用户 /dist/user/register.html 404（未找到）

请注意，某个额外的用户会被添加到网址中，导致无法找到register.html文件。同样，当我只使用用户作为路线时，它可以正常工作而没有任何错误，但当我只是从用户更改为用户/注册时，它已不再适用了。

有人可以告诉我为什么会这样，以及如何解决这个问题？

Answer 1

~~将链接的href更改为href="#/user/register"，这样可以为您解决问题。~~

我没有看到你启用了pushState。请修改您的index.html并添加

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

或者你的根网址是什么。这应该为您解决问题。

Answer 2

我对Ashley的回答做了一些小改动，因为我们不需要对本地网址进行硬编码，因此更加环保。我测试了它并且运行良好。

<base href="/">

Aurelia路由配置问题

2 个答案: