Rails に Vue Routerの導入 / 初めてのVue.js②

前回の続き　→ https://qiita.com/mmaumtjgj/items/baeafa3f8354728a55ed

前回はVueとBoostrapをrailsに導入したが、今回はVue Routerを使って画面遷移が出来るように行う。

Vue Routerとは、Vue.jsを使ったアプリケーションでルーティング制御をするためのプラグインのこと。

Vue Router をインストール・設定

% yarn add vue-router

インストールしたVue Routerで実際のルーティングを制御するファイルを作成していく。
app/javascript/router/index.jsファイルを作成し、下記を記入していく。

※今回はrouter/index.jsにルーティングを記入したが、エラー画面が出て、内容的にはpacks/router.jsが見当たらない的な内容であったので空ファイルで作成したら問題なく表示された。

app/javascript/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import TopIndex from "../pages/top/index" //ルート先のview
import TaskIndex from "../pages/task/index" //ルート先のview

Vue.use(Router)

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'top',
            component: TopIndex
        },
        {
            path: '/tasks',
            name: 'task',
            component: TaskIndex
        }
    ]
})
export default router

デフォルトの挙動ではURLに#が含まれるが、mode: historyを指定することでURLからhashを取り除くことができる。

router/index.jsで作成したルーティングをhello_vue.jsに設定を加えることで画面遷移が出来るようになる。

app/javascript/packs/hello_vue.js

  import Vue from 'vue'
  import App from '../app.vue'
  import 'bootstrap/dist/css/bootstrap.css'
  import router from '../router' //ここを追加

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    router, //ここを追加
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

ルート先ごとのviewを表示させる

現在、app/javascript/app.vueにてトップ画面を表記しているが、これをpages/top/index.vueに内容をコピーする。

app/javascript/app.vue →　javascript/pages/top/index.vue

<template>
  <div id="app" class="d-flex flex-column min-vh-100">
    <header class= "mb-auto">
      <nav class= "navbar navbar-expand navbar-dark bg-dark justify-content-between">
        <span class= "navbar-brand mb-0 h1">{{ title }}</span>
      </nav>
    </header>
    <div class="text-center">
      <h3>タスクを管理しよう！</h3>
      <div class="mt-4">生活や仕事に関するタスクを見える化して抜け漏れを防ぎましょう。</div>
      <router-link to="/tasks"><button type="button" class="btn btn-dark mt-5">はじめる</button></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      title: "タスク管理"
    }
  }
}
</script>

<style scoped>
 h3{
    color: red;
  }
</style>

router-link　to:はVue Routerで画面遷移する時に使用するタグ。

javascript/pages/top/index.vueファイルを新しく作成し、task用のビューを表記する。

javascript/pages/task/index.vue

<template>
    <div id="app" class="d-flex flex-column min-vh-100">
        <header class= "mb-auto">
            <nav class= "navbar navbar-expand navbar-dark bg-dark justify-content-between">
                <span class= "navbar-brand mb-0 h1">{{ title }}</span>
            </nav>
        </header>
        <div class="d-flex">
            <div class="col-4 bg-light rounded shadow m-3 p-3">
                <div class="h4">TODO</div>
                <div v-for="task in tasks" :key="task.id" class="bg-white border shadow-sm rounded my-2 p-4">
                    <span>{{ task.title }}</span>
                </div>
            </div>
        </div>
        <div class="text-center">
            <router-link to="/"><button class="btn btn-dark mt-5 router-link-active">戻る</button></router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: "TaskIndex",
  data() {
    return {
      title: "タスク管理アプリ",
      tasks: [
          {
                id: 1,
                title: "本を読む"
          },
          {
              id: 2,
              title: "買い物する"
          }
      ]
    }
  }
}
</script>

v-forはdata内の配列taskを一つづつ画面にリストとして表示している。
tasksの中のtaskを一個づつfor文で取得しているイメージ。

これでトップ画面とタスク画面の作成は完了したが、空になったapp/javascript/app.vueに<router-view/>を記入することでルーティングごとのviewを出すことができる。

app/javascript/app.vue

<template>
  <div>
    <router-view/>
  </div>
</template>

参考記事

今さら聞けない？Vue Router
Rails × Vue で vue Router を使用する
はじめてのVue Router(基本編)
【Vue.js入門】v-on、v-forを使ってみよう！