Aurelia - 历史记录

• 

  简述

  在本章中，您将学习如何使用aurelia-history插件。
• 

  第 1 步 - 安装插件

  此插件已作为标准配置的一部分提供。如果你已经设置aurelia.use.standardConfiguration()作为手动配置的一部分，您可以开始了。

  main.js

  
  export function configure(aurelia) {
     aurelia.use
     .standardConfiguration()
     .developmentLogging();
     aurelia.start().then(() => aurelia.setRoot());
  }
  

• 

  第 2 步 - 使用历史记录

  我们将使用上一章中的示例（Aurelia - Routing）。如果我们想设置向后或向前导航的功能，我们可以使用history对象与back()和forward()方法。我们将在路由器配置后添加它。

  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();
     }
  }
  

  现在，让我们添加两个按钮到我们的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>
  

  用户可以通过单击我们添加的按钮来前后导航。