はじめに
laravel sailを使ってlaravel10 + vue3.js + postgresSQL環境を作る
laravel sailで作成した環境にVue Router4を導入する方法を記載します。
Vue Routerとは
Vue.js公式のルーターです。
環境
- WSL2
- DockerDesktop
- laravel10
- sailと入力するだけでSailコマンドを実行できるように設定済
- Vue3.js
インストール
以下を実行し、Vue Router4をインストールします。
sail npm install --save-dev vue-router@4
表示するvueファイルの作成
resources/jsにてviewsディレクトリを作成し、その中に試しに表示するAboutView.vueファイルを作成します。
AboutView.vue
<template>
<h1>About</h1>
</template>
<script>
export default {
name: "AboutView",
};
</script>
index.jsファイルの作成
resources/jsにてrouterディレクトリを作成し、その中にindex.jsファイルを作成します。
index.js
import { createRouter, createWebHistory } from "vue-router";
import AboutView from "../views/AboutView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/about",
name: "about",
component: AboutView,
},
],
});
export default router;
app.jsを修正し、Vue Routerを使えるようにする
resources/js/app.jsを以下のように修正します。
import "./bootstrap";
import { createApp } from "vue";
import App from "./App.vue";
+ import router from "./router";
const app = createApp(App);
+ app.use(router).mount("#app");
- app.mount("#app");
App.vueにrouter-viewを読み込ませる
resources/js/App.vueを以下のように書き換えます。
App.vue
<template>
<router-view />
</template>
web.phpの修正
このまま、http://localhost/aboutへアクセスすると、404エラーとなってしまいます。
これは、laravelにて、http://localhost/以外のルーティングが設定されていないからです。
routes/web.phpを以下のように書き換えます。
web.php
Route::get('/{any}', function () {
return view('app');
})->where('any', '.*');
whereメソッドを使用して正規表現でanyを0文字以上とマッチするよう制約します。
（/以下に何もなくても、何かが入ってもOKとなる）
再度http://localhost/aboutへアクセスすると、resources/js/views/AboutView.vueで設定した通りに表示されました！
