Aurelia のルーティングを pushState に切り替える

Aurelia で pushState に切り替えるには、設定を変えるだけ
- config.options.pushState = true;
- config.options.hashChange = false;

設定を変えるだけとは

Aurelia のルーティングはデフォルトだと #~ を使ったタイプです。
例) http://localhost:9000/#/users

#~ を使ったタイプだと都合が悪い場合や、SEOを考慮する必要があるときは pushState が有効です。これにより自然な URL によるクライアントサイドルーティングができます。
例) http://localhost:9000/users

Aurelia のルーティングを pushState に切り替えるには config.options.pushState = true; と書けばOKです。

src/app.js

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.options.pushState = true;  // これで pushState に切り替わる
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: './welcome',      nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: './users',        nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: './child-router', nav: true, title: 'Child Router' }
    ]);

    this.router = router;
  }
}

※ aurelia/skeleton-navigation ... src/app.js を改変

初回アクセス時に #~ が自動的に pushState URL に変換される

どういうことかと言いますと、config.pushState = true とした Web アプリに
http://localhost:9000/#hoge のようにアクセスすると
http://localhost:9000/hoge にリダイレクトされてしまいます。この挙動はアプリ起動時だけのもので、例えばアプリ内のリンクに #hoge が付いていたとしても無視されます。

この挙動を抑止するには、さらに config.options.hashChange = false を追加します。

src/app.js

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.options.pushState = true;  // これで pushState に切り替わる
    config.options.hashChange = false; // これで謎挙動を抑止
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: './welcome',      nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: './users',        nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: './child-router', nav: true, title: 'Child Router' }
    ]);

    this.router = router;
  }
}

プログラムから画面遷移するには

aurelia-router モジュールの Router を inject することで、 ViewModel から画面遷移することができます。

src/welcome.js

import {computedFrom, inject} from 'aurelia-framework';
import {Router} from 'aurelia-router'

@inject(Router)  // Router を注入
export class Welcome {
  /* 省略 */

  constructor(router) {
    this.router = router;  // 注入された Router をプロパティにとっておく
  }

  /* 省略 */

  goToUsers() {
    // 例えばボタンクリックなどを trigger に
    this.router.navigate('/users'); // 遷移する
  }
}

※ aurelia/skeleton-navigation ... src/welcome.js を改変