Question

我想在页面顶部添加一些链接，当点击它们时，会在同一页面上向用户显示不同的视图。我想从头开始设置它。

我已经在网上看到了一些有关此工作的例子，但当我尝试使用Arelia todo示例作为基线（http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start）从头开始设置时，我似乎错过了一些东西。我假设我需要安装Aurelia路由器，但没有任何指令可以执行此操作（我可以找到）。在Github页面上读到的内容没有说明如何安装它。

我所知道的。

我需要一个包含路由的app.js文件，看起来像这样：

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';

    config.map([
      {route: ['','home'], name: 'home', moduleId: 'components/home/home', nav: true, title: 'Home'},
      {route: ['settings'], name: 'settings', moduleId: '/settings/settings', nav: true, title: 'Settings'}
    ]);


    this.router = router;

  }
}

我需要一个看起来像这样的app.html文件（这会遍历前面代码中的对象并访问它们的属性）。

<template>
   <nav>
    <ul>
      <li repeat.for="row of router.navigation"> <!--Loop through routes-->
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </nav>

  <router-view></router-view>
  <hr>

</template>

结果是一个没有错误的空白页面。我在app.html上放置的任何静态HTML都会呈现，但除此之外 - 什么都没有。

Answer 1

如果您继续关注Aurelia网站上的示例，那么您会注意到他们教程中的main.js是

UIImage

将此更改为

export function configure(aurelia) {
    aurelia.use.basicConfiguration();
    aurelia.start().then(() => aurelia.setRoot());
}

根据我对快速启动器的使用经验，我还必须在index.html中添加＆＃34; aurelia-routing.min.js＆＃34;。所以我的index.html看起来像：

export function configure(aurelia) {
    aurelia.use.standardConfiguration();
    aurelia.start().then(() => aurelia.setRoot());
}

如果你开始更多地进入Aurelia，我建议你从next tutorial开始

如何安装/设置Aurelia路由器/路由

1 个答案: