Laravel5.4とVue.jsでSPAを作ってみる。② -クライアントルーティング-

2018年1月30日

 

 

前回はこの記事でLaravel5.4とVue.jsの環境構築を行いました。
Laravel5.4とVue.jsでSPAを作ってみる。① -環境構築-

今回は、
クライアント側でのルーティングを行なう形で
もう少し実践的な内容で進めていきます。

 

記事の終わりにはこのようなページができます。
※無音なので、安心してご視聴ください。

 

動画をみるとわかりますが、
ページを切り替えているのに全体を読み込まず、
差分だけ切り替えているので、
これまでのWebアプリ特有のページの読み込みが無くなっています。

 

 

vue-routerのインストール

 

上の動画を実現するには、
クライアント側でルーティングを行う必要があるので、
vue-routerをインストールします。

https://router.vuejs.org/ja/essentials/getting-started.html
インストールの流れは簡単で、
package.jsonに依存性を追加 -> npm installです。

"devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-router": "^2.3.0"
  }

クライアントでのルーティングの設定

 

 

vue-routerをインストールできたら、
app.js、web.php、app.blade.phpを下のように変更します。

resourses/assets/js/app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
require('./bootstrap');

Vue.use(VueRouter);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
 const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: require('./components/Example.vue') },
    ]
});

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

routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

 

 

resources/app.blade.php
(body部分のみ表示しています)

<body>
  <div id="app" class="container">
    <div class="header">
      {{$description = __('messages.site-description') }}
      <navbar description="{{$description}}"></navbar>
    </div>
    <div class="wrapper">
      <div class="main">
        <h2>Contetns</h2>
        <hr>
        <router-view price="{{__('labels.price')}}"></router-view>
      </div>
    </div>
    <div class="footer">
      <nav-footer></nav-footer>
    </div>
  </div>
</body>

 

 

ここまでが終わったら、
一度ビルドしてhttp://127.0.0.1:8000/にアクセスしてみましょう。
http://127.0.0.1:8000/でアクセスすると上の動画のトップページが
表示され、任意のURLhttp://127.0.0.1:8000/hogeなどでアクセスすると
何も表示されなければ、クライアント側でのルーティングは成功しています。

さらにweb.phpを以下のように設定して、
指定したComponentを作成して配置してあげれば、
/, /example,/example/1, /example/2で
それぞれの画面を描画することができます。

 

 

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: require('./components/Example.vue') },
        { path: '/example', component: require('./components/Example.vue') },
        { path: '/example/1', component: require('./components/Example1.vue') },
        { path: '/example/2', component: require('./components/Example2.vue') },
    ]
});

※resources配下のソースを変更した場合は、ビルドするのを忘れずに・・・

 

ここまでで、
クライアントでのルーティングはできるようになりました。

わかりやすいように
app.jsとapp.blade.phpの全体を乗せておきます。

app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>spa-samples</title>

    <link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script>
    window.Laravel = {
        csrfToken: "{{ csrf_token() }}"
    };
    </script>
</head>
<body>
    <div id="app" class="container">
        <router-view></router-view>
        <nav-footer></nav-footer>
    </div>

</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
require('./bootstrap');

Vue.use(VueRouter);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
 Vue.component('nav-footer', require('./components/NavFooter.vue'));
 const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: require('./components/Example.vue') },
        { path: '/example', component: require('./components/Example.vue') },
        { path: '/example/1', component: require('./components/Example1.vue') },
        { path: '/example/2', component: require('./components/Example2.vue') },
    ]
});

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

 
長くなったので、今回はここまでとします。

 

 

まとめ

ここまでやると、
Vueで作成したSPAのサクサクした使用感がわかってくると
思います。
次回のAJAX通信によって画面を変更するとよりアプリケーションらしく
なって面白いかと思います。
以上です!!

 

ここまでのソースは下記に置いておきます。
レポジトリを変更したので、こちらのソースはfeature/step1ブランチにあります。
https://github.com/version-1/spa-sample