How to install/setup Aurelia router/routes

问题

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. I assume I need to install the Aurelia router but there are no instruction anywhere to do this ( that I can find). The read me at the Github page does not give instructions on how to install it.

What I know.

I will need an app.js file that has the routes and looks something like this:

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).

<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.

回答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

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". So my index.html looks like:

<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

来源：https://stackoverflow.com/questions/40757811/how-to-install-setup-aurelia-router-routes

标签

aurelia