Aurelia - Lịch sử

Trong chương này, bạn sẽ học cách sử dụng aurelia-history cắm vào.

Bước 1 - Cài đặt Plugin

Plugin này đã có sẵn như một phần của cấu hình tiêu chuẩn. Nếu bạn đã đặtaurelia.use.standardConfiguration() là một phần của cấu hình thủ công, bạn đã sẵn sàng.

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

Bước 2 - Sử dụng Lịch sử

Chúng tôi sẽ sử dụng một ví dụ từ chương cuối cùng (Aurelia - Routing). Nếu chúng tôi muốn đặt chức năng điều hướng trở lại hoặc chuyển tiếp, chúng tôi có thể sử dụnghistory đối tượng với back()forward()các phương pháp. Chúng tôi sẽ thêm điều này sau khi cấu hình bộ định tuyến.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './pages/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',    
            moduleId: './pages/about/about',    nav: true, title:'About' }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
	goForward() {
      history.forward();
   }
}

Bây giờ, hãy thêm hai nút vào view.

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>
	
   <button click.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button click.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

Người dùng có thể điều hướng trở lại và chuyển tiếp bằng cách nhấp vào các nút chúng tôi đã thêm.