vue-router を使用したルーティングができない。

Question

実現したいこと

Vue3を使用したルーティング

前提と問題

Vue3を使ってSPAの挙動を試したいが出来なかった。
ボタンを押したら指定したパスのコンポーネントへ遷移する物を試しで作りたいがボタン以外は何も出ず、遷移がされません。

ご教授いただけると幸いです。

<template>
    <div>
        <img src="imge_test/1200x630.png" alt="">
        <hr>
        <div class="d-flex justify-content-center">
            <button>stop</button>
            <button>back</button>
            <button>next</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Drawing'
}
</script>

<template>
    Top
</template>

<script>
export default {
    name: 'Index'
}
</script>

<template>
  <div id="app">
    <div>
      <router-link to="/" class="btn btn-primary mx-2">
        Top
      </router-link>
      <router-link to="/drw" class="btn btn-warning">
        Drawing
      </router-link>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

import { createRouter, createWebHistory } from "vue-router";
import Drawing from './components/Drawing.vue'
import Index from './components/Index.vue'
 
export const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'index',
            component: Index
        },
        {
            path: '/drw',
            name: 'Drawing',
            component: Drawing
        }
    ]
})

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { router } from './router'

var app = createApp(App)
app.use(router)
createApp(App).mount('#app')

Answer 1

main.jsの8行目をこれに変更すればどうでしょうか。

app.mount('#app')

Comments

[itsukimoromoro]

ありがとうございます！解決できました。