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

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是

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

将此更改为

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

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

<body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script src="scripts/aurelia-routing.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>

但是，如果你开始进入Aurelia，我建议你从下一个教程开始

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

问题描述

1 个解决方案

解决方案1
0 2016-12-21 02:15:43

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

问题描述

1 个解决方案

解决方案1 0 2016-12-21 02:15:43

解决方案1
0 2016-12-21 02:15:43