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

実現したいこと

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

前提と問題

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

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

components/Drawing.vue

1<template> 2 <div> 3 <img src="imge_test/1200x630.png" alt=""> 4 <hr> 5 <div class="d-flex justify-content-center"> 6 <button>stop</button> 7 <button>back</button> 8 <button>next</button> 9 </div> 10 </div> 11</template> 12 13<script> 14export default { 15 name: 'Drawing' 16} 17</script>

components/Index.vue

1<template> 2 Top 3</template> 4 5<script> 6export default { 7 name: 'Index' 8} 9</script>

App.vue

1<template> 2 <div id="app"> 3 <div> 4 <router-link to="/" class="btn btn-primary mx-2"> 5 Top 6 </router-link> 7 <router-link to="/drw" class="btn btn-warning"> 8 Drawing 9 </router-link> 10 </div> 11 <hr> 12 <router-view></router-view> 13 </div> 14</template> 15 16<script> 17export default { 18 name: 'App', 19} 20</script>

router.js

1import { createRouter, createWebHistory } from "vue-router"; 2import Drawing from './components/Drawing.vue' 3import Index from './components/Index.vue' 4 5export const router = createRouter({ 6 history: createWebHistory(), 7 routes: [ 8 { 9 path: '/', 10 name: 'index', 11 component: Index 12 }, 13 { 14 path: '/drw', 15 name: 'Drawing', 16 component: Drawing 17 } 18 ] 19})

main.js

1import { createApp } from 'vue' 2import App from './App.vue' 3import './index.css' 4import { router } from './router' 5 6var app = createApp(App) 7app.use(router) 8createApp(App).mount('#app') 9