0%

Programmingプログラミングナレッジ

Posted:2019.04.29

Vue CLIとVue RouterでミニマムなSPAを最短で構築する

ウェブサイトやアプリケーションでも単一のページで構成されるシングルページアプリケーション(SPA)の形で実装されることが増えてきていますが、そんな場合にもVue.jsはよく使われます。今回はVue CLIでSPAを構築する基本的な流れをまとめていきたいと思います。

 

SPAを作成するための拡張ライブラリのVue Router

Vue.jsでSPAを構築する際には、拡張ライブラリである「Vue Router」と言うものを合わせて使います。Vue CLIの場合ですとインストール時にまとめて追加できますのであらかじめ用意しておきます。詳しくは過去記事「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」をご覧ください。Vue CLIを使わず、スタンドアローンなどの方法で進める場合には下記のコマンドでライブラリを直接node_modulesにインストールしていきます。

$ npm install vue-router

 

 

基本的なSPA構築の流れ

Vue Routerをインストールして準備が整えば、いよいよSPAを構築していきます。まずはmain.jsへ下記のようにrouter用のスクリプトを読み込む追記していきます。そしてインスタンス内にもrouterを追加します。

【main.js】

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

 

次にrouterを設定するスクリプトファイルである「router.js」へSPAにおいて動的にページを描画させるのに重要となるページのルーティングの設定を行っていきます。ページごとにそれぞれ固有のコンポーネントがある場合にはそれらを読み込みます。そして、routerのインスタンスにページのURLに付くパスの設定と、紐付くコンポーネントを指定していきます。

【router.js】

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Page1 from './views/Page1.vue'
import Page2 from './views/Page2.vue'

Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
  {
   path: '/',
   name: 'home',
   component: Home
  },
  {
   path: '/page1',
   name: 'Page1',
   component: Page1
  },
  {
   path: '/page2',
   name: 'Page2',
   component: Page2
  }
 ]
})

 

以上で、基本的な設定は完了です、あとはビュー側に表示させるための作り込みをしていきます。まず、ルーティングで設定したURLを出力するために「router-link」というタグを使います。このタグの「to」属性に設定したパスを指定するとビルド後に自動でリンク要素が出力されます。そして、動的に切り替わる部分には「router-view」というタグを入れておきます。このタグはrouter.jsのルーティングで紐付けされたコンポーネントが動的に呼び出されるようになります。つまり、この部分がページごとに切り替わる仕組みとなります。

【App.vue】

<template>
 <div id="app">
  <ul class="navigation">
   <li><router-link to="/">トップ</router-link>
   </li>
   <li><router-link to="/page1">ページ1</router-link>
   </li>
   <li><router-link to="/page2">ページ2</router-link>
   </li>
  </ul>
  <div class="content">
   <router-view/>
  </div>
 </div>
</template>

 

ページごとに切り替わるコンポーネントはそれぞれ次のようにルーティングで設定した通り揃えておきます。

【Home.vue・Page1.vue・Page2.vue】

// インデックスページのVueコンポーネント
<template>
 <div class="home">this page is home
 </div>
</template>

<script>
 export default {
  name: 'Home'
 }
</script>

// ページ1のVueコンポーネント
<template>
 <div class="page1">this page is page1
 </div>
</template>

<script>
 export default {
  name: 'Page1'
 }
</script>

// ページ2のVueコンポーネント
<template>
 <div class="page2">this page is page2
 </div>
</template>

<script>
 export default {
  name: 'Page2'
 }
</script>

 

これでビルドすると実際にSPAとして機能しているのが試せます。URLが切り替わってもページ遷移していないのが確認できます。

 

個別ページをデータに対応して動的に出力させるSPAの例

上記は固定ページの画面切り替えなどで使われる例ですが、ブログ記事や商品詳細情報など、ある情報をもとに動的にページが生成されるようなケースもあるかと思います。そんな時はルーティングの設定でidを付与することで対応できます。下記はrouter.jsの中身ですが、routesの設定でパスが「/:id」となっていることに注目します。

【router.js】

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Id from './views/Id.vue'

Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
  {
   path: '/',
   name: 'home',
   component: Home
  },
  {
   path: '/:id',
   name: 'Id',
   component: Id
  }
 ]
})

 

リンクを出力する際には、同じようにto属性に値を入れますが、この値が先ほどのidと紐付けられる形となります。この値はコンポーネント自身のデータにidのパラメータとして保持します。ここではハードコーディングで値を入れていますが、データベースからパーマリンクURLなどの値として扱う場合には動的に処理することになります。

【App.vue】

<template>
 <div id="app">
  <ul class="navigation">
   <li><router-link to="/">トップ</router-link>
   </li>
   <li><router-link to="/id_01">ID-01のページ</router-link>
   </li>
   <li><router-link to="/id_02">ID-02のページ</router-link>
   </li>
  </ul>
  <div class="content">
   <router-view/>
  </div>
 </div>
</template>

 

このidについては、対象となるコンポーネント内のテンプレートタグ内で「$route.params.id」とすることで出力することができます。ビルドされたHTMLには文字列として値が表示されます。

【Id.vue】

<template>
 <div class="single">this page is {{ $route.params.id }}
 </div>
</template>

<script>
 export default {
  name: 'Id'
 }
</script>

 

【HTML】※一部省略

<div class="single">this page is id_01
</div>

 


 

いかがでしょうか、これだけで最低限のSPAを実装することができます。実際にはそのほかにもいろんな処理が行われるかと思いますが、基本的にはこれだけ押さえておくと大丈夫なのではないでしょうか。Vue CLIとVue Routerでこんなにも簡単にSPAを実装できるのはとても便利ですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】