#今回の題
1ヶ月前に勉強がてらLaravelとVue.jsでSPAを構築してみたのですが、1ヶ月経った今、その手順をすっかり忘れてしまいました。
必要な時に振り返ればいい知識だとは思うのですが、忘れすぎて少し癪だったのでアウトプットしておきます。

この記事では、HomeとUserというページを作り、それぞれをページ遷移を行わずに切替えられる様にします。

ページのコンテンツとURLがページ遷移なしに切り替わっているのがわかると思います。

#バージョン

Laravel6.8
Laravel Mix 4.1.4
Vue.js 2.6.12
Vue Router 3.4.3

#手順

##Laravelのインストール

$ composer create-project "laravel/laravel=6.8" laravel-spa

##各種パッケージのインストール

Vue.js

$ npm install vue --save-dev

Laravel Mix

$ npm install laravel-mix --save-dev

Vue Router

$ npm install vue-router --save-dev

cross-env

$ npm install cross-env --save-dev

##Laravel Mixの設定

webpack.mix.jsにコンパイル先を定義します。

webpack.mix.js

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

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

これでresources/js/app.jsに書いたVueはpublic/jsにコンパイルされます。
version()はキャッシュ対策です。
ブラウザに以前のJavaScriptがキャッシュとして残っていると、キャッシュの方を使ってしまうので、ここでversion()を使い、さらにviewでmix関数を使ってjsを読み込むことで対策出来ます。
参考

##コンパイル
以下のコマンドで変更を監視し、自動的にコンパイルが行われる様にします。

$ npm run watch

##各種ファイル作成

###view

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="app">
    <router-view /> 
  </div>
  <script src="{{ mix('js/app.js') }}"></script> 
</body>

</html>

参考

###router.js

resources/js/にrouter.jsを作成。
SPAのルーティングはここに定義します。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/pages/Home'
import User from './components/pages/User'

Vue.use(Router)

export default new Router({
  mode: 'history', 
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home 
    },
    {
      path: '/user',
      name: 'user',
      component: User 
    },
  ]
})

Vue.jsとvue-router、使用するコンポーネントをimportしたあと、ルーティングでパスにコンポーネントを割り振っています。
参考

###app.js
resources/js/app.jsを以下の様に編集します。

import Vue from 'vue'
import router from './router.js'

new Vue({
 router
}).$mount('#app')

Vue.jsとvue-routerをimportして、routerを適用する要素を設定します。

参考

###コンポーネント
ページの内容となるコンポーネントはcomponentsディレクトリで管理します。

$ mkdir resources/js/components

componentsディレクトリにpagesディレクトリを作成し、

$ mkdir resources/js/components/pages

そこに、Home.vue User.vueというファイルを作り、以下の様にそれぞれ編集します。

Home.vue

<template>
    <div>
        <h1>Home</h1>
        <router-link :to="{ name: 'user' }">User</router-link>
    </div>
</template>

User.vue

<template>
    <div>
        <h1>User</h1>
        <router-link :to="{ name: 'home' }">Home</router-link>
    </div>
</template>

##確認
以下のコマンドでビルトインサーバーを立ち上げ、

$ php artisan serve

http://127.0.0.1:8000/
にアクセスして確認してください。

最初のgifの様な動きが確認できるはずです。
あとはこれを土台に好きな様に弄り回してSPAで色々作れると思います。

以上！！

#一言
最初SPAの構築ができた時、めちゃくちゃ興奮して無駄にページ行き来しまくりました。
SPAすごい技術だなぁ……。

#参考
readouble アセットのコンパイル
 Vue Router
Laravel6.xとVue Routerでvue.jsのSPA構築