[初心者]Vue Routerを使用してルーティングを実装する

はじめに

今回、Vue3とVuetifyを使用してフロント画面の実装をしてみたくなったので、その際に必要だったルーティングを調べたりしました。

Vue Routerのインストール

Vue Routerをインストールします。
(Vue CLIを使用してプロジェクトを作成した場合Vue Routerはデフォで含まれているらしいです。)

$ npm install vue-router

プロジェクトのルートディレクトリにrouterというディレクトリを作成し、その中にindex.jsというファイルを作成します。
src/router/index.jsの感じです。

components配下にHome.vueとHoge.vueというファイルを作成しそれぞれのパスを指定します。

index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../components/Home";
import Hoge from "../components/Hoge"; 

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/hoge",
    name: "Hoge",
    component: Hoge,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

次にmain.jsにルーティングの設定をインポートします。

main.js

import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
import router from "./router/index"; // Vue Routerの設定をインポート

loadFonts();

createApp(App).use(vuetify).use(router).mount("#app"); //.use(router)を追加

そしてApp.vueをいじります

App.vue

<template>
    <Header />
    <router-view /> //追記
</template>

<script setup>
import Header from "./components/Header.vue"; 
</script>

最後にクリックした時に想定したページに飛ぶように設定していきます。
ヘッダーcomponents配下に作成します。
イメージ

それぞれにパスを指定していきます。

Header.vue

<template>
  <v-app-bar app color="black">
    <v-spacer />
    <div class="menu">
      <v-btn text to="/">HOME</v-btn> //パスを指定
      <v-btn text to="/hoge">HOGE</v-btn> //パスを指定
    </div>
  </v-app-bar>
</template>

いけた。