Github Pages でVueのrouterが動かなくてハマった件の対応 #Vue.js

トップからrouter-linkを辿ったときは正常にページ遷移できるけど、
外部から直リンクでアクセスしたら404になるやんけ！
……と困ったときの対応メモです。
手間を掛けず、サクッと対応できる方法、ということで。

概要

そもそも論、実際には存在していないページにアクセスしようとしているから404が出るわけで、
まず404ページからドキュメントルートに飛ばしてから、うまく表示できるような細工をするという流れになります。

404ページの作成

404ページにて、アクセスしたパスを記録したうえでドキュメントルートに遷移させてあげます。
ルート直下に404.htmlを作ればOK。

404.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script>
    // sessionStorageにアクセスしたURLを記録しておく
    sessionStorage.redirect = location.href;
  </script>
  <!-- ドキュメントルートに遷移させる -->
  <meta http-equiv="refresh" content="0;URL='/'"></meta>
</head>
<body>
</body>
</html>

Vue側の準備

Vueの方は基本的に通常通りページ構築すればOK。
必要に応じてベースディレクトリの設定を修正しましょう。

index.htmlだけ、ちょこっと細工をします。
下記をhead内に追記。

index.html

<script>
  (function(){
    // 保存しておいたURLを取り出す
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      // historyを書き換える。これで正常にページ遷移を行ったときの表示となる。
      history.replaceState(null, null, redirect);
    }
  })();
</script>

雑感

便利で快適なGithub Pagesをご利用ください。

参考