Vite+Vue.js3環境にvue-rooterを後から追加
昨日作成したViteプロジェクトにvue-rooterを追加したのでその作業履歴です。
環境
・macOS 12.5 Monterey
・NodeJS 18
・Vue.js3
・Vite3
作業手順
作業はターミナルから行います。npmコマンドでインストールします。
npm install vue-router@4
main.jsでrouterを登録します。
import App from './App.vue'
import router from './router' // 追加
createApp(App).use(router).mount('#app') // .use(router)を追加
srcフォルダ下にrouterフォルダを作成し、そこにindex.jsを作成し以下のように記載します。
import { createRouter, createWebHistory } from 'vue-router';
import Hoge from '../components/Hoge.vue'
import Moge from '../components/Moge.vue'
const routes = [
{
path: '/hoge',
name: 'Hoge',
component: Hoge
},
{
path: '/moge',
name: 'Hoge',
component: Hoge
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
画面遷移もテストするため2つの画面を定義しています。画面のソースは後述します。
次にsrc/App.vueを以下のように修正します。
<template>
<div><router-view /></div>
</template>
画面を作ります。まずcomponents/Hoge.vueを作り以下のように記述します。
<template>
<div><router-link to="/moge">Go to Moge</router-link></div>
</template>
次にcomponents/Moge.vueを作り以下のように記述します。
<template>
<div><router-link to="/hoge">Go to Hoge</router-link></div>
</template>
ターミナルでアプリを起動します。
npm run dev
ブラウザでURL/hogeを開いて画面表示、画面遷移を確認します。
