如何安裝/設置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