【Vue.js】Vue Routerを活用して画面遷移する

実装したいこと

Vue Routerを使い、画面遷移機能を実装したいです。
タスク管理アプリで、トップ画面⇔タスク一覧画面と遷移できるように設定していきます。
Vue.jsは初めて使うので、データの流れが分からず実装に時間がかかってしまいました。復習していきます。

実装の流れ

• ルーターのインストール
• ルーターの設定
• ルーターの初期化
• コンポーネント側の設定

使用バージョン

• Ruby 2.6.5
• Rails 6.0.2.1
• Vue.js 2.6.11

前提

データの流れ順に記載しています。
root /にアクセスすると、home#index home_controllerのindexアクションへ飛びます。
indexアクションでは、home/index/html.erbをレンダリングします。
home/index/html.erbでは、hello_vueを読み込みます。
ここからスタートしていきます！

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

class HomeController < ApplicationController
  def index; end
end

<%= javascript_pack_tag 'hello_vue' %>

ルーターのインストール

インストール | Vue Router
インストール方法は直接ダウンロードかCDNです。

私はyarnでインストールしました。

$ yarn add vue-router

ルーターの設定

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

// ルート用のコンポーネントを読み込む
import TopIndex from "../pages/top/index.vue";
import TaskIndex from "../pages/task/index.vue";

// プラグインとして登録。これでRouterを使用できる。
Vue.use(Router)

// Routerインスタンスを生成
const router = new Router({
  mode: 'history',　// URLにハッシュをつけない
  routes: [
    {
      path: '/',
      component: TopIndex,
      name: "TopIndex", // 名前付きルート
    },
    {
      path: '/tasks',
      component: TaskIndex,
      name: "TaskIndex",
     },
  ],
})

// 作ったRouterインスタンスをエクスポート
export default router

/にアクセスしたら、/pages/top/index.vueを読み込む、
/tasks にアクセスしたら、/pages/task/index.vueを読み込む、というように設定していきます。
importで他ファイルから読み込む設定をしています。

ルーターの初期化

上記で作成した、ルーターの設定をしたファイルrouter/index.jsを読み込み、rootとなるインスタンスを生成してマウントします。

import Vue from 'vue'
import App from '../app.vue' //App.vueを読み込む

import router from '../router'
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

// Vueアプリケーション起動
document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    router, // routerをVueインスタンスへ渡している
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

render: h => h(App)とは

以下のとおり、render関数を省略した形のよう
おまじないとして覚えておきます

Explanation for `render: h => h(App)` please · Issue #29 · vuejs-templates/webpack-simple · GitHub Vue.jsのrender: h => h(App)について調べた - Qiita

コンポーネント側の設定

<router-view>コンポーネントは与えられたパスに対してマッチしたコンポーネントを描画する関数型コンポーネントです。
<router-link>ルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。

API リファレンス | Vue Router

<template>
  <router-view /> //ここにパスにマッチしたコンポーネントが描画される
</template>

さきほど、名前付きルートを登録したので toパラメーターに渡すことができる。

<template>
  <router-link :to="{ name: 'TaskIndex' }" class="btn btn-dark mt-5">タスク一覧へ</router-link>
</template>

<template>
  <router-link :to="{ name: 'TopIndex' }" class="btn btn-dark mt-5">戻る</router-link>
</template>