【Vue.js】VueRouterを使ってルーティングを作成

はじめに

vue.jsでVueRouterを使ってルーティングを作成する。

yarnを使ってVueRouterをインストール

$ yarn add vue-router

VueRouterの初期設定

import Vue from "vue";
import Router from "vue-router";

import TopIndex from "../pages/top/index";
import TaskIndex from "../pages/task/index";

Vue.use(Router)

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: TopIndex,
      name: "TopIndex",
    },
    {
      path: "/tasks",
      component: TaskIndex,
      name: "TaskIndex",
    },
  ],
})

export default router

vueとVueRouterをインポートします。

import Vue from "vue";
import Router from "vue-router";

画面遷移先のファイルをコンポーネントとしてインポートします。

import TopIndex from "../pages/top/index";
import TaskIndex from "../pages/task/index";

モジュールシステムを使う際に、明示的にモジュールをインストールする必要があるため下記の記載をします。

Vue.use(Router)

VueRouterのインスタンスを作成します。

const router = new Router({
  mode: "history",　　// HTML5 Historyモードを使用
  routes: [
    {
      path: "/",
      component: TopIndex,
      name: "TopIndex",
    },
    {
      path: "/tasks",
      component: TaskIndex,
      name: "TaskIndex",
    },
  ],
})

VueRouterのインスタンスのrouterをエクスポートして、他のファイルでインポートできるようにします。

export default router

<router-view>コンポーネントを記載

<template>
  <div>
    <router-view />  // ルーティングにマッチしたコンポーネントを描画
  </div>
</template>

hello_vue.jsにVueRouterのファイルを読み込む

import Vue from 'vue'
import App from '../app.vue'
import router from '../router'  // 追加：先程のrouterを読み込む
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    router,  // vueインスタンス生成時のオプションに追加
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

各ページのファイルの設定

<template>
  <div class="d-flex flex-column min-vh-100">
    <header class="mb-auto">
      <nav class="navbar navbar-dark bg-dark">
        <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="{ name: 'TaskIndex' }" class="btn btn-dark mt-5">はじめる</router-link>
        //  <router-link>はaタグみたいな感じ
        //  ルーティングの設定でnameプロパティを設定したのでリンク先をnameで指定できる
    </div>
    <footer class="mt-auto text-center">
      <small>Copyright &copy; 2020</small>
    </footer>
  </div>
</template>

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

<style scoped>
</style>

<template>
  <div class="d-flex flex-column min-vh-100">
    <header class="mb-auto">
      <nav class="navbar navbar-dark bg-dark">
        <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">
               // v-for はrailsでいうeachメソッド
          <span>{{ task.title }}</span>
        </div>
      </div>
    </div>
    <div class="text-center">
      <router-link :to="{ name: 'TopIndex' }" class="btn btn-dark mt-5">戻る</router-link>
    </div>
    <footer class="mt-auto text-center">
      <small>Copyright &copy; 2020</small>
    </footer>
  </div>
</template>

<script>
export default {
  name: "TaskIndex",
  data() {
    return {
      title: "タスク管理アプリ",
      tasks: [
        {
          id: 1,
          title: "スーパーに買い物に行く"
        },
        {
          id: 2,
          title: "子供の迎えに行く"
        },
        {
          id: 3,
          title: "新聞を解約する"
        },
        {
          id: 4,
          title: "ゴミ出しをする"
        },
      ]
    }
  }
}
</script>

<style scoped>
</style>

サーバーサイドのルーティングを集約

Rails.application.routes.draw do
  root to: 'home#index'
  get '*path', to: 'home#index'  #  追加
end

完成

path : /

path : /tasks