プッシュステート、ポップステート、ロケーションハッシュなどのメソッドを利用して、独自の小型ルーティングを実装できます。

以下に、pushState、popState、location.hash を使って、簡単な簡易ルーティングを実現する方法の簡単なサンプルを示します。

var routes = {};
function route(path, callback) {
routes[path] = callback;
}
function handleRoute() {
var path = location.hash.slice(1);
if (routes[path]) {
routes[path]();
}
}
function navigateTo(path) {
history.pushState(null, null, '#' + path);
handleRoute();
}
window.addEventListener('popstate', handleRoute);
// 示例路由
route('/', function() {
console.log('Home page');
});
route('/about', function() {
console.log('About page');
});
// 处理初始路由
handleRoute();

上記のコーディングでは、まずroutesオブジェクトを定義して、さまざまなパスに対応するコールバック関数を格納します。次に、route関数を定義して、パスと対応するコールバック関数を登録します。

handleRoute関数のなかで、location.hashから現在のパスを取り出し、対応するコールバック関数があれば、そのコールバック関数を呼び出す。

ネイティブアプリでナビゲーションを行う際はnavigateToメソッドが使用されます。このメソッドは、URLのパスを変更するためのhistory.pushStateメソッドを使用して、handleRouteメソッドを呼び出して対応するコールバック関数を呼び出します。

最後に popstate イベントをリッスンしてブラウザの進む戻るを処理しています。ユーザーがブラウザの進むまたは戻るボタンを押すと、popstate イベントが発火し、そのイベントハンドラ内で対応するコールバック関数を再実行することができます。

サンプルルーティングに加えて、独自のニーズに合わせてほかのパスやコールバック関数を登録することができます。