【Vue.js】ライブラリVue Routerを導入してSPA(シングルページアプリケーション)を作ってみる

今回はVue.jsにルーティング用のライブラリVue Routerを導入し、SPA(シングルページアプリケーション)を作ってみます。管理人は以前、PHPとGETパラメータで内容を切り替えるSPAを作りましたが、検索エンジンが登録せず大変でした。今度はvueでやってみます。さっそくやりかたを確認していきましょう。

Vue.js用ライブラリ　Vue Routerとは？

Vue Routerは、Vue.js用のルーティング制御ライブラリです。具体的には、vueアプリケーションに以下のような機能を持たせることができます。

・ルート（URLパス）ごとに表示するコンポーネントを設定
・パラメータを含むルートも設定
・ルートの中に子ルートを持つ(入れ子)
・ナビゲーションリンクの作成
・Historyモード or Hashモード履歴管理

今回管理人は『コンポーネント設定・ナビゲーションリンク・Hashモード履歴管理』あたりを使用してきます。公式ドキュメントはありますが英語です（ブラウザで翻訳して読んでみましょう）。

Vue Routerドキュメント(公式・英語)
https://router.vuejs.org/

Vue RouterでSPA・コード例及びポイント

コードはこんな形に。CSSなどは省略しています(後述のサンプルページではpタグにマージンついてるなど)。id="vueApp"の要素にマウントします。router-link toの要素にはナビのリンク、router-viewの要素にはcomponentで設定した内容が入ります（urlによって切り替わる）。

またcdn.jsdelivr.netから、vueの本体と、ライブラリVue Routerを読み込みしています。そのほかのポイントとして、ルーターインスタンス部分で履歴モード設定というのがあります。以下の部分です。

『createWebHashHistory()』の記載で履歴モードがHashになります。こちらのモードだと設定がラクそうです。
あとはいつものように『createAppでVueインスタンス作成・app.use(router)でルーター登録・id要素にマウント』といった流れです。

表示例

では早速動作確認してみます。まずはトップページ。 『path: '/'』で設定したcomponentの文章が表示されました。url後ろの＃はハッシュモード由来と考えられます。

productページ。『ドメイン/test/2025-0701vueSpa/#/product』というurlになります。 『path: '/product'』で設定したcomponentの文章が表示されました。

次に、存在しないurlの処理。『ドメイン/test/2025-0701vueSpa/#/ttttt』はルーティングを設定していないページです。 『ページが見つかりません。』の表示を出すようにcomponentの文章を書いていたので、こちらもOKですね。

今回作ったvueアプリは、以下のurlで見れるようにアップしておきましたので、こちらもご確認ください。

Vue.js SPAてすと
https://division-web.atelier-ss-agency.com/test/2025-0701vueSpa

index.htmlなどのファイルで行う場合は？

上記の例ではルートごとにcomponentの文章を書いていましたが、これを『ルートごとにhtmlファイルを切り替えたい』というケースがあるかもしれません。componentに渡す定数に、以下のようなファイルをfetchする内容をつける感じでしょうか。

このタイプのサンプルはまだ作っていないんですけど、管理人がなんか自社サービスサイトを作るときは、こっちの方法でやろうかなと思っています。

あとがき・まとめ

まとめると、こんなところでしょうか。想像していたよりはシンプルだったかなという印象です。