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

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

# Vue-Routerのインストール

```bash
npm install vue-router 
```

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

```json: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ページ」も作成

```javascript: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の作成

```php:resources/views/welcome.blade.php
……省略……
　<router-view></router-view>
……省略……
```

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

```vue: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>
```

```vue: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>タグになる

```vue: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>
```

# 結果確認

・リポートページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/2115c9c6-e255-3888-e51e-d29346f476ae.png)

・フォームページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/6d640c5e-ec05-454c-650f-9f366ba53972.png)

・フォームページでリフフェッシュする場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208640/77b21369-2db3-c91b-46f7-b039b893591a.png)

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