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

Question

I want a few links at the top of my page, and when they are clicked, different views are presented to the user on the same page. 我想在页面顶部添加一些链接，当它们被点击时，会在同一页面上向用户显示不同的视图。 I want to set this up from scratch. 我想从头开始设置它。

I've seen a few examples online of this working but when I try to set it up from scratch using the Arelia todo example as a baseline ( http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start ), I seem to missing something. 我在网上看到了一些这方面的例子，但当我尝试使用Arelia todo示例作为基线从头开始设置它时（ http://aurelia.io/hub.html#/doc/article/aurelia/framework / latest / quick-start ），我似乎错过了一些东西。 I assume I need to install the Aurelia router but there are no instruction anywhere to do this ( that I can find). 我假设我需要安装Aurelia路由器，但没有任何指令可以执行此操作（我可以找到）。 The read me at the Github page does not give instructions on how to install it. 在Github页面上阅读我并未提供有关如何安装它的说明。

What I know. 我知道的。

I will need an app.js file that has the routes and looks something like this: 我需要一个包含路由的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;

  }
}

I will need an app.html file that looks something like this ( this loops through the objects in the previous code and accesses their properties). 我需要一个看起来像这样的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>

The results is a blank page with no errors. 结果是一个没有错误的空白页面。 Any static HTML I place on app.html will render but other than that - nothing. 我在app.html上放置的任何静态HTML都会呈现，但除此之外 - 什么都没有。

Answer 1

If you're following on from the example from the Aurelia website, then you will have noticed that the main.js in their tutorial is 如果您正在关注Aurelia网站上的示例，那么您会注意到他们教程中的main.js是

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

Change this to 将此更改为

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

In my experience with the quick starter, I had to also add into the index.html the "aurelia-routing.min.js". 根据我使用快速启动器的经验，我还必须在index.html中添加“aurelia-routing.min.js”。 So my index.html looks like: 所以我的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>

If however you're starting to get more into Aurelia, I suggest you start with their next tutorial 但是，如果你开始进入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