ウェブサイトやアプリケーションでも単一のページで構成されるシングルページアプリケーション（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を実装できるのはとても便利ですね。