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](https://qiita.com/hshota28/items/765cf903f055754f7557)
[Rails × Vue で vue Router を使用する](https://qiita.com/yoshi-sho-0606/items/3bf3d61d9fc50366d9bf#vue-route%E3%81%AE%E8%A8%AD%E5%AE%9A)
[はじめてのVue Router(基本編)](https://reffect.co.jp/vue/first-time-vue-router)
[【Vue.js入門】v-on、v-forを使ってみよう！](https://qiita.com/watsuyo_2/items/bda8f2673cf49de4421b)