このブログは未経験からのエンジニア転職やプログラミングの勉強方法などを発信する、現役エンジニアによるエンジニアのためのトータル技術ブログです。ブログとご一緒にSNSのフォローもよろしくお願いします。

Twitterをフォローする

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

JavaScript
スポンサーリンク
きつね先生
きつね先生

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

わんぽち
わんぽち

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

きつね先生
きつね先生

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

にゃんみ
にゃんみ

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

 

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

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

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

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

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

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

 

スポンサーリンク

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

 

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

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

 

・npmのインストール

ターミナル

 

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

webpack.mix.js

 

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

 

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

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

 

routes/web.php

 

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

 

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

 

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

 

resources/views/index.blade.php

 

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

 

JavaScriptの記述

 

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

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

 

resources/js/app.js

 

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

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

 

npmのコンパイル

 

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

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

 

ターミナル

 

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

 

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

 

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

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

 

package.json

 

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

 

webpack.mix.js

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

 

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

 

ターミナル

 

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

 

Vue Routerでの画面遷移

 

工程は以下になります。

 

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

 

Vue Routerのインストール

 

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

 

ターミナル

 

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

 

コンポーネントの作成

 

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

 

resources/js/App.vue

 

resources/js/pages/Example.vue

 

resources/js/pages/Example2.vue

 

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

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

 

ルーティング

 

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

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

 

resources/js/router.js

 

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

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

 

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

 

resources/js/app.js

 

1.router.jsでエクスポート内容を定義
2.ルートコンポーネントの定義
3.ルーティングの定義を読み込む
4.ルートコンポーネントの宣言
5.ルートコンポーネントの表示

以上の処理になります。

ルートコンポーネントを表示していますのでマッピングしたパス(/),(/example2)を変更することで連動したページコンポーネントにフロントエンド側で切り替わります。

 

さいごに

 

最後まで読んでいただきありがとうございます。

次はAPIについて書ければと思います。SNS連携なども行いたいので外部APIの使い方などもまとめていけたらなと。

この記事を気に入っていただけましたらTwitterdでもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。

あっきーをフォローする
JavaScriptLaravelPHPVue.js
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき