Laravel7.xにVue-Routerを実装してSPAを構築してみる (1)

LaravelアプリにVue-Routerを実装してみる

Vue-Routerのインストール

npm install vue-router 

package.jsonに "vue-router"が追加されたことを確認

package.json

"dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.7.0",
    "cross-env": "^7.0.2",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
}

Vue-Routerを追加

・app.jsでVue-Routerをインポートして、VueRouterを定義する
・ラウトで表示する「Report / Formページ」も作成

resources/js/app.js

require('./bootstrap');

// Bootstrap-vueの実装
import Vue from 'vue'
import VueRouter from 'vue-router'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(VueRouter)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

window.Vue = require('vue');
import ReportPage from './pages/report.vue'
import FormPage from './pages/form.vue'

import NavVar from './components/navbar.vue'
Vue.component('navigation-bar', NavVar)

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'report-page',
            component: ReportPage
        },
        {
            path: 'form',
            name: 'form-page',
            component: FormPage
        }
    ]
});

const app = new Vue({
    el: '#app',
    router
});

ラウト先の内容を表示するコンポーネントを作成

router-viewの作成

resources/views/welcome.blade.php

……省略……
　<router-view></router-view>
……省略……

VueRouterで定義したページを作成

resources/js/pages/report.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ greeting }}</div>
                    <div class="card-body">
                        Report Component
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                greeting: 'hello'
            }
        }
    }
</script>

resources/js/pages/form.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ greeting }}</div>
                    <div class="card-body">
                        Form Component
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                greeting: 'hello'
            }
        }
    }
</script>

・各ページの入り口になるナビゲーションバーの作成
・<router-link>がVue-Routerでの<a>タグになる

resources/js/components/navbar.vue

<template>
    <nav class="navbar navbar-expand-lg fixed-top navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="#" style="font-weight:bold;">自己管理ツール</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <router-link class="nav-link" :to="{ name: 'report-page' }">レポート <span class="sr-only">(current)</span></router-link>
                </li>
                <li class="nav-item">
                    <router-link class="nav-link" :to="{ name: 'form-page' }">記録</router-link>
                </li>
            </ul>
        </div>
    </nav>
</template>

結果確認

・リポートページ

・フォームページ

・フォームページでリフフェッシュする場合

→　Laravelアプリ内でのラウトではないため、404エラーが出力されるのが当然
今後対応してみよう！