Aurelia - 路由

• 

  简述

  路由是每个app的重要组成部分。在本章中，您将学习如何在 Aurelia 框架中使用路由器。
• 

  第 1 步 - 创建页面

  我们已经在前一章中创建了一个组件文件夹。如果你还没有创建它，你应该把它放在里面src文件夹。

  
  C:\Users\username\Desktop\aureliaApp\src>mkdir components
  

  复制

  在这个文件夹中，我们将创建home和about目录。

  
  C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
  C:\Users\username\Desktop\aureliaApp\src\components>mkdir about
  

  复制

  在 - home文件夹，我们需要创建view和view-model文件。

  
  C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
  C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html
  

  复制

  我们还需要view和view-model为了about页。

  
  C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
  C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html
  

  复制

  Note− 您也可以手动创建以上所有文件夹。
• 

  第 2 步 - 页面

  接下来，我们需要在我们创建的文件中添加一些默认代码。

  主页.html

  
  <template>
     <h1>HOME</h1>
  </template>
  

  复制

  主页.js

  
  export class Home {}
  

  复制

  about.html

  
  <template>
     <h1>ABOUT</h1>
  </template>
  

  复制

  about.js

  
  export class About {}
  

  复制
• 

  第 3 步 - 路由器

  我们将创建view-model为了router里面app.js文件。

  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: 'about',  name: 'about',
              moduleId: './components/about/about',    nav: true, title:'About' }
        ]);
        this.router = router;
     }
  }
  

  复制

  我们的路由器view将被放置在app.html.

  app.html

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

  复制

  当我们运行app时，我们可以通过单击更改路线home或关于链接。