📜  Aurelia-路由

📅  最后修改于: 2020-12-09 05:25:11             🧑  作者: Mango


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

第1步-创建页面

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

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

在此文件夹中,我们将创建目录和关于目录。

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

文件夹中,我们需要创建视图视图模型文件。

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

我们还需要关于页面的视图视图模型

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

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

第2步-页面

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

home.html


home.js

export class Home {}

about.html


about.js

export class About {}

步骤3-路由器

我们将在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;
   }
}

我们的路由器视图将放置在app.html中

app.html


当我们运行该应用程序时,我们可以通过单击主页或关于链接来更改路线。

Aurelia路由示例