Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること

仕組み

laravel/routes/web.php がリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。
返された Blade ビューに記述しておいた <div id="app"></div> や <script src="{{ mix('/js/app.js') }}"></script> などにより、 Vue.js を使えるようになる。

コード抜粋

laravel/routes/web.php です。ここでは、正規表現制約を使って Laravel にやってきたどんな URL でも app ビューを返すようにしています。それでは URL ごとに異なるページを表示できないのでは ? と疑問に思うかもしれませんが、 URL は Vue.js の方でも受け取れるので、 Vue.js の方で、処理をします。実際には、 Vue.js に Vue Router を組み込んでこれを使います。

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

laravel/resources/views/app.blade.php です。 <example-component/> は確認用に入れてみたもので、開発を進めるにあたって不要ですので、後で削除予定です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Vue SPA</title>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Styles -->
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <example-component/>
    </div>
    <script src="{{ mix('/js/app.js') }}"></script>
  </body>
</html>

コードの差分

$ git diff laravel/routes/web.php
diff --git a/laravel/routes/web.php b/laravel/routes/web.php
index 810aa34..67a9899 100644
--- a/laravel/routes/web.php
+++ b/laravel/routes/web.php
@@ -11,6 +11,6 @@
 |
 */

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

laravel/resources/views/app.blade.php は新規ファイルなので差分はありません。

おわりに

仕組みの部分の理解が、難しかったです。ルーティングを考慮して呼び出した Blade ビューに Vue.js の JavaScript を入れる、わかってしまえばなんてことはありませんでした。

SPA から呼び出す API は routes/api.php の方に書いていけば良さそうです。

あとは、今回の修正で不要となったファイルが出てきますので、削除すれば良いと思うのですけれども、多分放置すると思います。。。

以上です。

仕組み

コード抜粋

コードの差分

おわりに

関連

コメントを残すコメントをキャンセル