アウレリア-歴史

この章では、 aurelia-history プラグインの使用方法を学習します。

ステップ1-プラグインをインストールする

このプラグインは、標準構成の一部としてすでに利用可能です。手動構成の一部として* aurelia.use.standardConfiguration（）*を設定している場合、準備は完了です。

main.js

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

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

ステップ2-履歴の使用

最後の章（ Aurelia-Routing ）の例を使用します。前後にナビゲートする機能を設定する場合、* back（）および forward（）メソッドで *history オブジェクトを使用できます。これは、ルーターの構成後に追加します。

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 に2つのボタンを追加しましょう。

appl

<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>

ユーザーは、追加したボタンをクリックして、前後に移動できます。

Aurelia History Example

Aurelia-history

目次