【Vue.js】Vue-RouterのインストールからSPAの実装までわかりやすく解説します。

npm install vue-router

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 追記
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
  components,
  directives,
})

const app = createApp(App)
app.use(router)　// 追記
app.use(vuetify)
app.mount('#app')

// vue-routerから必要な関数をインポート
import { createRouter, createWebHistory } from 'vue-router'

// 表示するビューコンポーネントをインポート
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

// ルーターインスタンスを作成
const router = createRouter({
  // HTML5 History APIを使った履歴モードを設定
  history: createWebHistory(import.meta.env.BASE_URL),
  // ルートの設定
  routes: [
    // ルート "/" にアクセスした場合、"/home" にリダイレクト
    { path: '/', redirect: '/home' },
    {
      // "/home" パスに対応するルート
      path: '/home',
      // ルート名
      name: 'home',
      // 表示するコンポーネント
      component: HomeView
    },
    {
      // "/about" パスに対応するルート
      path: '/about',
      // ルート名
      name: 'about',
      // 表示するコンポーネント
      component: AboutView
    }
  ]
})

// ルーターインスタンスをエクスポート
export default router

<template>
  <h1>This is Home page</h1>
</template>

<template>
  <h1>This is about page</h1>
</template>

<script setup>
import { RouterView } from 'vue-router'
const navList = [
  {
    text: 'About',
    routeName: 'about' // router/index.jsに記載しているnameの値を記述
  },
  {
    text: 'Home',
    routeName: 'home' // router/index.jsに記載しているnameの値を記述
  }
]
</script>

<template>
  <v-app>
    <v-app-bar>
      <v-app-bar-title> Vue-router </v-app-bar-title>
      <v-list class="d-flex">
        <v-list-item v-for="(item, index) in navList" :key="index" :to="{ name: item.routeName }">
          <template v-slot:prepend>
            <v-list-item-title class="ml-2">
              {{ item.text }}
            </v-list-item-title>
          </template>
        </v-list-item>
      </v-list>
    </v-app-bar>
    <v-main>
      <Suspense>
        <v-container>
          <RouterView /> // ルーティングされたコンポーネントが <RouterView /> の中に表示
        </v-container>
      </Suspense>
    </v-main>
  </v-app>
</template>