ルーターインスタンスを作成する際、historyオプションによって異なる履歴管理モードを選択できます。

Hashモード

URLの形式

URL内にハッシュ文字（#）を含み、例えばhttp://example.com/#/profileのような形式になります。

サーバー設定

サーバー側の特別な設定は不要です。ハッシュ以降の部分はサーバーに送信されないため、バックエンドでの処理が求められません。

特徴

利点：

• 古いブラウザを含め幅広い互換性がある
• サーバー設定が不要で導入が容易

欠点：

• SEO面で不利
• URLに#が含まれ、見た目がスッキリしない

動作の仕組み

HashモードはURLの#記号とhashchangeイベントを活用しています。ハッシュ部分の変更はページの再読み込みを引き起こしません。

// ハッシュ変更の監視
const setupHashRouter = () => {
  const handleHashChange = () => {
    const routePath = location.hash.slice(1) || '/';
    renderComponent(routePath);
  };

  window.addEventListener('hashchange', handleHashChange);
  handleHashChange(); // 初期表示
};

HTML5 Historyモード

URLの形式

一般的なURL形式で、http://example.com/profileのようにハッシュを含みません。

サーバー設定

サーバー側の設定が必須です。ユーザーが直接URLにアクセスした場合、サーバーがindex.htmlを返すようにフォールバックを設定する必要があります。設定しないと404エラーが発生します。 詳細な設定方法：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

特徴

利点：

• SEOに有利
• URLがシンプルで見やすい

欠点：

• モダンブラウザでのみ動作
• サーバー設定が必要

動作の仕組み

HistoryモードはHTML5 History API（pushState、replaceState）とpopstateイベントを使用します。

// History APIを使用したルーティング
const navigateTo = (path) => {
  history.pushState({ path }, '', path);
  renderComponent(path);
};

// ブラウザの戻る・進むボタンの監視
window.addEventListener('popstate', (e) => {
  const state = e.state;
  if (state && state.path) {
    renderComponent(state.path);
  }
});

Memoryモード

Memoryモードはブラウザ環境を前提とせず、URLとの相互作用がありません。そのため、Node.js環境やSSR（サーバーサイドレンダリング）に適しています。 詳細：https://router.vuejs.org/guide/essentials/history-mode.html#memory-mode