前回はこの記事で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