Vue3 で Vue Router4 を使う方法

背景

Vue3にVue Router4を導入した時の方法の備忘録です。

内容

ページ作成

src フォルダ直下に「pages」というフォルダを作成し、その中に「IndexPage.vue」と「DetailPage.vue」というファイルを作成します。
※h1 タグの内容はそれぞれ「IndexPageです。」と「DetailPageです。」に変更します。

template>
  <div>
    <h1>IndexPageです。</h1>
  </div>
</template>
 
<script>
export default {
}
</script>

Vue Router4 の設定

「main.js」ファイルに必要なコードを書きます。

import { createApp } from 'vue';
import App from './App.vue';
import router from "./router";
 
const app = createApp(App);
app.use(router);
app.mount('#app');

「main.js」と同じ階層に、「router.js」ファイルを作成し、以下のようにコードを書きます。

import {createRouter,createWebHashHistory} from 'vue-router';
import Index from "./pages/IndexPage";
import Detail from "./pages/DetailPage";
 
const routes = [
  { path: '/', component: Index },
  { path: '/Detail', component: Detail },
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
 
export default router;

「App.vue」を以下のようにコード書きます。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

IndexPage

DetailPage

それぞれ、表示することができました。