Aurelia - Định tuyến
Định tuyến là một phần quan trọng của mọi ứng dụng. Trong chương này, bạn sẽ học cách sử dụng bộ định tuyến trong khung công tác Aurelia.
Bước 1 - Tạo trang
Chúng tôi đã tạo một thư mục thành phần trong một trong các chương trước đây. Nếu bạn chưa tạo nó, bạn nên đặt nó bên trongsrc thư mục.
C:\Users\username\Desktop\aureliaApp\src>mkdir components
Bên trong thư mục này, chúng tôi sẽ tạo home và about các thư mục.
C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about
Bên trong home thư mục, chúng ta cần tạo view và view-model các tập tin.
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html
Chúng tôi cũng cần view và view-model cho about trang.
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html
Note - Bạn cũng có thể tạo tất cả các thư mục trên theo cách thủ công.
Bước 2 - Trang
Tiếp theo, chúng ta cần thêm một số mã mặc định vào các tệp chúng ta đã tạo.
home.html
<template>
<h1>HOME</h1>
</template>
home.js
export class Home {}
about.html
<template>
<h1>ABOUT</h1>
</template>
about.js
export class About {}
Bước 3 - Bộ định tuyến
Chúng tôi sẽ tạo view-model cho router phía trong app.js tập tin.
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;
}
}
Bộ định tuyến của chúng tôi view sẽ được đưa vào 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>
Khi chúng tôi chạy ứng dụng, chúng tôi có thể thay đổi các tuyến đường bằng cách nhấp vào home hoặc về các liên kết.