理系公務員のプログラミング日記

Vue Router をLaravel + Vueアプリに導入する

Vue.jsで複数ページを作る際にはvue-routerの利用が鉄板です。

vue3 + laravel8でのアプリケーションでvue-routerを導入していきます。

インストール

npm によるインストールを行う時には、-Dを追加してください。

これを追加することで、開発用のパッケージであることを宣言できます。

本番サーバにデプロイする際には、vueに関するファイルはjavascriptにビルドされる（変換される）ので不要になります。

vue3に対応したvue-routerはver4以降なので、vue-router@nextでインストールします。

npm install -D vue-router@next

router.jsの作成

resources/js/router.js

import {createRouter, createWebHistory} from 'vue-router'
// 必要なコンポーネントをインポート
import HelloWorld from './components/HelloWorld'

export const router = createRouter({
    history: createWebHistory(),
    routes: [
        // 必要な数だけ書く
        {
            path: '/',
            name: 'index',
            component: HelloWorld,
        },
        {
            path: '/hello',
            // nameには一意な名前をつける
            name: 'hello', 
            component: HelloWorld,
        }
    ]
})

export default router

app.jsの編集

VueRouterの利用することをapp.jsに記載します。

resources/js/app.js

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App)
    .use(router)
    .mount('#app')

App.vueの編集

VueRouterに記載したい内容を追加したい場所にrouter-viewタブで指定します。

こうすることで、全ての画面で共通の内容とURIによって表示を変更したい内容を区別することができます。

resourve/js/App.vue

<template>
  <div>
    {{ data.message }}
    <hr>
    <router-view></router-view>
  </div>
</template>

<!-- 略 -->

ここまでは、Vueのみの時の使い方とほとんど同じでした。

Laravelのルーティングの編集

最後にLaravelのweb.phpに書き内容を追加します。

web.php

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

これはどのURIにアクセスしても（any）、LaravelからVueへの橋渡しになるwelcome.blade.phpファイルを指定するものになります。

URIによるルーティングはVueRouter側で行いたいので、Laravel側ではこのような設定を基本的には利用します。