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

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

コンポーネントが増えて、１枚のページではごちゃごちゃしてきました。

ページを切り替えて表示するために、Vue側でルーティングができるvue-routerを利用します。

インストール

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

これによって開発用でのみ利用するパッケージであることを宣言できます。

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

vue3に対応したvue-routerを指定するために、vue-router@4としてバージョン４をインストールします。

npm install -D vue-router@4

app.jsの編集

vue-routerを利用することをapp.jsに指定します。

この後に作るrouterフォルダを参照元として記載します。

resources/js/app.js

// bootstrapの有効化
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

import { createApp } from "vue";
import { router } from './router'; //追加
import App from "./App.vue";

const app = createApp(App);

// app.mount("#app");           // 追加前
app.use(router).mount("#app");

routerファイルの設定

resources/js/router/index.js

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

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

export default router

App.vueの編集

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

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

resourve/js/App.vue

<template>
    <h1>Hello World</h1>
    <router-view></router-view>
</template>

<script>
export default {
    name: 'App',
}
</script>

ここまでは、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側ではこのような設定を基本的には利用します。

これがないと、vue-routerによるルーティングが正常に動作しません.