Vue Router×Laravel Mixでフロントエンドの画面遷移を行う方法

きつね先生

本日はVueRouterとLaravelMixをつかった画面遷移の方法を勉強しましょう！

わんぽち

VueRouterとかLaravelMixってなんだわん？

きつね先生

簡単に言うとSPAを構築するための専用のルータですね！

にゃんみ

LaravelとVue.jsの組み合わせが難しいから早く知りたいにゃ

こんにちは！あっきーです！

最近はSPAの開発手法を学んでいますので基礎としてVue Routerを使ったフロントエンドでの画面遷移の実装方法を記事にしました。

設定にはライブラリのLaravelMixを使用します。

LaravelMixを使用することでvueコンポーネント、SCSSなどのコンパイルの仕組みが提供され、webpackの設定作業が省かれるのでお試しによさそうです。

「SPA × API」でのアプリケーション構築をこれから始める人はご参考程度に読んでみてください。

では、まとめていきます。

Laravelプロジェクトの作成
フロントエンド側の初期設定
Vue Routerでの画面遷移
さいごに

Laravelプロジェクトの作成

以前の記事でまとめてますので下記の記事を参照してプロジェクトの作成を行ってください。

・Laravelプロジェクトの作成

AWS Cloud9 で Laravel を使ってみた。【環境構築】

こんにちは！あっきー(IwswAkht)です！近頃はプログラミングもWeb系でしたら、専らフレームワークを使っての開発が主流になってきましたね。僕もつい先日からPHPのフレームワークLaravelを始めました。今後の...

・データベースの設定

aws-cloud9-で-laravel-を使ってみる【データベース構築】

こんにちは！あっきーです！ Webサイトではデータベースの構築って絶対必要ですよね！でも、データベースってコマンドラインで構築したり、phpMyAdmin などの専用の管理画面から構築したりで結構大変です。データベース専門のエンジ...

フロントエンド側の初期設定

工程は以下になります。

1. npmのインストール
2. 初期リクエストのルーティング
3. テンプレートファイルの作成
4. JavaScriptの記述
5. npmのコンパイル

まずは「Hello World」を出力します。

順に説明してきます。

npmのインストール

npmインストールの前に「package.json」を必要に応じて編集しましょう。

package.json

"devDependencies": {
    "axios": "^0.18",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "vue": "^2.5.17",
    "resolve-url-loader": "^2.3.1",  追加
    "vue-template-compiler": "^2.5.21"  追加
}

"devDependencies": {

"axios": "^0.18",

"cross-env": "^5.1",

"laravel-mix": "^4.0.7",

"vue": "^2.5.17",

"resolve-url-loader": "^2.3.1", 追加

"vue-template-compiler": "^2.5.21" 追加

}

bootstrapやjQueryなど使わないパッケージは削除しました。

必要/不必要なパッケージの記述をしましたらパッケージをインストールします

・npmのインストール

ターミナル

$ npm install

1	$ npm install

インストールしましたらビルド時の設定としてLaravelMixのファイルを編集します。

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js') //Vueコンポーネントのコンパイル
  .version();  //キャッシュ対策

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js') //Vueコンポーネントのコンパイル

.version(); //キャッシュ対策

初期リクエストのルーティング

SPAはAjaxによる非同期リクエスト→jsonデータのレスポンスを繰り返しますが初期リクエストのみHTMLをレスポンスします。

なので初期画面のルーティングはLaravelで行います。

routes/web.php

Route::get('/{any?}', function () {
    return view('index');
})->where('any', '.+');

Route::get('/{any?}', function () {

return view('index');

})->where('any', '.+');

ワイルドカード(?)をanyパラメータに持たせ、whereメソッドにどんな文字列でも良い(.+)正規表現を記述することでルート(/)またはパスにアクセスしたらindexテンプレートを返すというルーティングになってます。

テンプレートファイルの作成

以下のファイルを作成します。

resources/views/index.blade.php

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>
    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

<!doctype html>

<head>

<title>{{ config('app.name') }}</title>

</head>

<body>

</body>

</html>

まずはルートテンプレートとして要素を1つだけ設置しておきます。

JavaScriptの記述

先ほど作成したテンプレートファイルの要素に対しての処理を記述していきます。

以下のファイルを編集してください。

resources/js/app.js

import Vue from 'vue'

new Vue({
    el: '#app',
    template: '<h1>Hello world</h1>'
})

import Vue from 'vue'

new Vue({

el: '#app',

template: '<h1>Hello world</h1>'

})

1.vueコンポーネントを定義(import)
2.要素(app)をマウントしてHello world表示

以上の処理を行っています。

npmのコンパイル

コンパイルして表示確認していきます。

以下のコマンドを実行します。

ターミナル

$ npm run dev

1	$ npm run dev

ルート(/)または適当なパスを追加してアクセスすると「Hello world」が表示されることが確認できます。

コンパイルのを自動で行う

おまけですがコンパイルを自動でおこなうためには「browser-Sync」というツールを使用します。

先ほどのnpmのインストール時に行ったファイルを以下のようにして行います。

package.json

"devDependencies": {
    ※省略
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "2.0.1", 
}

"devDependencies": {

※省略

"browser-sync": "^2.26.3",

"browser-sync-webpack-plugin": "2.0.1",

}

上記の記述を追加した状態でインストールします。

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
  .version();
  .browserSync('my-domain.dev');  //追加

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')

.version();

.browserSync('my-domain.dev'); //追加

※自分の環境に合わせて()内は変更します。

設定しましたら以下のコマンドを実施します。

ターミナル

$ npm run watch

1	$ npm run watch

これにより監視モードでコンパイルが走るため、一度コンパイルを行えばファイル変更が行われるたびに自動的にコンパイルを実施してくれます。

Vue Routerでの画面遷移

工程は以下になります。

1. Vue Routerのインストール
2. コンポーネントの作成
3. ルーティング

Vue Routerのインストール

以下のコマンドを実施します。

ターミナル

$ npm install -D vue-router

1	$ npm install -D vue-router

インストールが完了しますと「package.json」にVue Routerの情報が追加されています。

コンポーネントの作成

以下3つのファイルを作成します。

resources/js/App.vue

<template>
  <div>
    <main>
      <div class="container">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<div>

<main>

</div>

</main>

</div>

</template>

resources/js/pages/Example.vue

<template>
  <h1>Page1</h1>
</template>

</template>

resources/js/pages/Example2.vue

<template>
  <h1>Page2</h1>
</template>

</template>

1.resources/js/App.vue：
ルートコンポーネント。テンプレートファイル作成時に記述した要素(app)に表示されるパーツを<RouterView />で定義する。

2.Example.vue：
ページコンポーネント。<RouterView />で定義された切り替わるパーツ。Example2.vueも同様。

ルーティング

最後に作成したコンポーネントのルーティングを行います。

以下のファイルを作成します。

resources/js/router.js

// 1.
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.
import Example from './pages/Example.vue'
import Example2 from './pages/Example2.vue'

// 3.
Vue.use(VueRouter)

// 4.
const routes = [
  {
    path: '/',
    component: Example
  },
  {
    path: '/example2',
    component: Example2
  }
]

// 5.
const router = new VueRouter({
    mode: 'history',
    routes
})

// 6.
export default router

// 1.

import Vue from 'vue'

import VueRouter from 'vue-router'

// 2.

import Example from './pages/Example.vue'

import Example2 from './pages/Example2.vue'

// 3.

Vue.use(VueRouter)

// 4.

const routes = [

{

path: '/',

component: Example

{

path: '/example2',

component: Example2

}

]

// 5.

const router = new VueRouter({

mode: 'history',

routes

})

// 6.

export default router

1.vueコンポーネント/VueRouterの定義
2.ページコンポーネントの定義
3.ルートコンポーネントを有効にする
4.パスのマッピング
5.インスタンスの生成
6.インスタンスのエクスポート

以上のような処理を行います。

続いて先ほど「Hello world」を表示したテンプレートファイルに対する処理の変更をしていきます。

resources/js/app.js

import Vue from 'vue'
import router from './router' // 追加 1.
import App from './App.vue' // 追加 2.

new Vue({
  el: '#app',
  router, // 追加 3.
  components: { App }, // 追加 4.
  template: '<App />' // 追加 5.
});