[laravel]laravel(v6)でvue-routerを使う

前回に引き続いて、vue-routerを入れて動かしてみました。
ページを２つ作って、vue-routerに定義して、画面遷移できるところまで確認してみました🤔

vue-routerとは
vue-routerをインストールする
ファイルの追加と変更
動作確認
1. 今回のサンプルはこちら

vue-routerとは

vue-routerはvueで、URLルーティングを実装するためのライブラリです。
公式ガイドはこちらです。

vue-routerをインストールする

下記コマンドでさくっとインストールします。

npm install vue-router

ファイルの追加と変更

vueのページを２つ作成

トップページ用のファイルを作りました。

top.vue

<template>
    <div>
        <nav class="navbar navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Test Page</a>
        </nav>
        <div class="container mt-3">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">トップページ</div>
                        <div class="card-body">
                            <router-link to="/second" class="btn btn-primary">次のページ</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

bootstrapが入っているので、画面のレイアウトはbootstrapを使っています。
router-linkで次のページに遷移しています。

次に遷移先のページを作成しました。

second.vue

<template>
    <div>
        <nav class="navbar navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Test Page</a>
        </nav>
        <div class="container mt-3">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">次のページ</div>
                        <div class="card-body">
                            テストページ！<br>
                            <router-link to="/" class="btn btn-primary">トップページ</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

同じような内容でトップページに戻るためのボタンを付けています。

routerファイルを作成する

routerファイルを作って、
「このURLにアクセスしてきたら、このファイルを表示する」みたいな感じで定義を書きます。

resource/js/router.js

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

import top from './components/top.vue'
import second from './components/second.vue'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            component: top
        },
        {
            path: '/second',
            component: second
        }
    ]
})

appファイルを修正する

app.jsファイルに作ったrouterを読み込んで設定します。

resource/js/app.js

require('./bootstrap');

window.Vue = require('vue');

// Vue.component('example-component', require('./components/ExampleComponent.vue').default);

import router from "./router";

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

welcome.blade.phpを修正する

laravelで最初(トップページ)にアクセスされた時に表示されるファイルを下記のように修正しました。

welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Example</title>
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <router-view/>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

router-viewの箇所に作ったvueファイルの内容が展開されます。