JavaScript

【VueによるSPA構築】SPAに新規ページを追加する方法

課題を持った人
課題を持った人
Vue CLIで構築したシングルページアプリケーションの雛形に、新たにページを追加したいんだけど、どうやってやればいいんだろう?

こういった要望に答えます。
筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。

この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。

事前準備

シングルページアプリケーションの雛形を作成すると、「Home」「About」の2ページが初期ページとして存在していますが、今回はここに「NewPage」というページを追加していきます。

画面確認用にローカルサーバを立ち上げておきましょう。

「NewPage.vue」を作成→編集する

ページに相当するファイルはviewsディレクトリ内に作成します。今回は「NewPage」というページを追加するので、「NewPage.vue」というファイルをviewsディレクトリ内に作成しましょう。

「NewPage.vue」内に記述したものが、実際にページに反映されるコンテンツになります。.vue拡張子ファイル内は<template>、<script>、<style>のブロックで構成されます。今回は以下のように書きます。

これで表示するページのコンテンツが作成できました。

「router.js」を編集する

次にrouter.jsを編集します。router.jsにはリソースのURLに紐づくコンポーネント(今回の場合はNewPage.vueのこと)を指定します。

ここが通常のWebサイトとシングルページアプリケーションの異なることろです。

これで、NewPageのリンクを設定する準備が整いました。あとは、NewPageへのリンクを設定するのみです。もう少しなので頑張りましょう。

「App.vue」を編集する

NewPage.vueを表示するために、「App.vue」にリンクを設置します。

リンクの設置が完了しました。
実際にページで動作を確認してみましょう。
以下のように表示されましたか?

筆者
筆者
以上、Vue CLIで構築したシングルページアプリケーションの雛形に、新たにページを追加する方法でした。SPAでない通常のWebアプリケーションに比べてすこし手間が増えますが慣れてしまえばそんなに難しくありませんので繰り返し作業をして覚えてしまいましょう。