RouterLinkを後で追加

１ インストール

npm install vue-router

２　src/配下のrouterディレクトリを作りindex.tsを作成する

import { createRouter, createWebHistory } from 'vue-router';//　-追加
import type { RouteRecordRaw } from 'vue-router';//　-追加
import HomeVue from '@/components/HomeVue.vue'// -表示するコンポーネント名
import MogeVue from '@/components/MogeVue.vue'// -表示するコンポーネント名

const routes: RouteRecordRaw[] = [
  {
    path: '/home',
    name: 'Home',
    component: HomeVue
  },
  {
    path: '/moge',
    name: 'Moge',
    component: MogeVue
  }
];

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

export default router;

３ main.tsに下記を追加

import './assets/main.scss'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // -追加

createApp(App).use(router).mount('#app')　// -.use(router)追加

４　App.vueに下記を追加

<script setup>
  import { RouterLink, RouterView } from 'vue-router' // -追加
</script>
<template>
<header>
    <RouterLink to="/">戻る</RouterLink> // App.vueに戻るならなんの設定もなしにto="/"
    <RouterLink to="/home">Home</RouterLink> // アクセス先
    <RouterLink to="/moge">moge</RouterLink>　// アクセス先
  </header>
  <main>
    <div><RouterView /></div>// -ここがRouterLinkに指定されてるコンポーネントが表示される。
  </main>
</tamplate>