目录

Aurelia - 路由( Routing)

路由是每个应用程序的重要组成部分。 在本章中,您将学习如何在Aurelia框架中使用路由器。

第1步 - 创建页面

我们已经在之前的章节中创建了一个组件文件夹。 如果您尚未创建它,则应将其放在src文件夹中。

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

在这个文件夹中,我们将创建homeabout目录。

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

home文件夹中,我们需要创建viewview-model文件。

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

我们还需要about页面的viewview-model

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

Note - 您也可以手动创建上述所有文件夹。

第2步 - 页面

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

home.html

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

home.js

export class Home {}

about.html

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

about.js

export class About {}

第3步 - 路由器

我们将在app.js文件中为router创建view-model

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>

当我们运行应用程序时,我们可以通过单击home或链接来更改路径。

Aurelia路由示例
↑回到顶部↑
WIKI教程 @2018