Rails × Vue で vue Router を使用する #Rails

rails アプリの中でVueを使用する場合にVue Routerを使ったページの切り替えができるまでの過程を書いていきます。

Vue Routerとは

Vue Routerとは、Vue.jsを使ったアプリケーションでルーティング制御をするためのプラグインのことです。これを利用することでリクエストされたURLごとに表示するページを切り替えることができるようになります。

Vue Routerを使いページの切り替えができるようになるまで

Vue Routerでページの切り替えをするには

Vue Routerのインストール
Vue Routerの設定
application.jsファイルでVue Router の設定をimportする
表示したいページ（コンポーネントの用意）
rails側のルーティングの設定

が必要となるので順番に進めていきます。

Vue routerのインストール

まずは Vue Routerをインストールしていきます。インストールの仕方は様々だと思いますが自分の環境では以下のコマンドでインストールを行いました。

yarn add vue-router

これだけでインストールは完了です。次のステップに進みます。

Vue Routeの設定

インストールしたVue Routerで実際のルーティングを制御するファイルを作成していきます。まだ作成していないコンポーネントをインポートしますがこちらは後で作成します。

app/javascript/router.js

というファイルを作成し、中身を

import Vue from 'vue'
import Router from 'vue-router'
import Top from "../pages/top"
import Test from '../pages/test'

Vue.use(Router)

export default new Router({
  name: "Router",
  mode: 'history',
  routes: [
    {
      path: '/',
      name: "top",
      component: Top,
    },
    {
      path: '/test',
      name: "test",
      component: Test,
    },
  ]
})

とします。

application.jsファイルに Vue Router の設定をimportする

先ほど設定したURLごとのコンポーネントの切り替えを反映するためのコードを

app/javascript/application.js

に追加します。

import Vue from 'vue'
import App from '../app.vue'
import Router from'../router.js' // 追加 router.jsファイルのimport
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App),
    router: Router // 追加 router.jsに書いたルーティングごとに切り替えを使用できるようになる
  }).$mount()
  document.body.appendChild(app.$el)
})

表示したいページの準備

URLごとに表示するページ（コンポーネント）を作成していきます。

トップページの作成

ますはトップページを作成していきます。

app/javascript/pages/top.vue

というファイルを作成し、中身を

<template>
  <p>topページです</p>
</template>

<script>
export default {
  name: "Top",
}

とします。

切り替え先ページの作成

app/javascript/pages/test.vue

というファイルを作成し、中身を

<template>
  <p>testページです</p>
</template>

<script>
export default {
  name: "Test",
}

とします。

最後にHTMLファイルに実際に読み込まれる

app/javascript/app.vue

ファイルの変更を行います。（上で用意した二つのコンポーネントはこのファイルの中に埋め込まれる）

<template>
  <div>
    <router-view /> // この部分にURLごとのファイルが埋め込まれる
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

Vue Routerを使用すると各コンポーネントは<div>タグの中に記述されている<router-view />の中に埋め込まれるようになるなります。これでページの準備は完了です。

rails側のルーティングを設定する

rails側ではどんなURLにリクエストが来たとしても表示するページはひとつとなります。その中で埋め込むページを切り替えるのはVue側の役目となります。なのでrouter.rbの中身を以下とします。

Rails.application.routes.draw do
  root to: 'home#index'
  get '*path', to: 'home#index' # どのURLにリクエストが来たとしてもhome#indexアクションを使用する
end

これで全ての設定が完了です。

サーバーを起動し、http://localhost:3000、http://localhost:3000/test にアクセスすると表示が切り替わるようになります。