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 にアクセスすると表示が切り替わるようになります。