キムラボ

2022/08/14 13:50 Vue.js

昨日作成した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」を開き画面の表示、遷移ができることを確認します。