Laravel9+Vue3環境にvue-rooterを追加
昨日作成したLaravel9+Vue3環境にvue-rooterを追加してみました。
環境
・macOS 12.5 Monterey
・NodeJS 18
・Vue.js3
・Vite3
作業手順
まずvue-rooterをインストールします。
npm install vue-router@4
resource/js/app.jsにview-toureterが使えるように修正しました。
import './bootstrap';
import '../css/app.css';
import {createApp} from 'vue'
import App from './App.vue'
import router from './router.js'
createApp(App).use(router).mount("#app")
resource/js/にrouter.jsを作成します。
import { createRouter, createWebHistory } from 'vue-router';
import Top from './Top.vue'
import Moge from './Moge.vue'
const routes = [
{
path: '/',
name: 'Top',
component: Top
},
{
path: '/moge',
name: 'Moge',
component: Moge
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
resources/js/App.vueを修正します。
<template>
<div><router-view /></div>
</template>
resources/jsにTop.vueを作成します。
<template>
<div><router-link to="/moge">Go to Moge</router-link></div>
</template>
resources/jsにMoge.vueを作成します。
<template>
<div><router-link to="/">Go to Top</router-link></div>
</template>
ブラウザで「http://127.0.0.1:8000」を開き画面の表示、遷移ができることを確認します。