vuejsに routerをいれた router vuejs

vuejsに routerをいれた
作業は以下4つ

・1 # yarn add vue-router@4 でインストール
package.json
"vue-router": "4",


・2 ./src/router.jsの作成
import { createRouter, createWebHistory } from 'vue-router'
import Top from './components/Top.vue'
import Edit from './components/HelloWorld.vue'
const routes = [
{ path: '/', name: 'Top', component: Top },
{ path: '/edit', name: 'Edit', component: Edit },
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router

・3 ./src/main.jsに以下を追加
import router from './router'
createApp(App)
.use(vuetify)

・4 ./src/App.vue の <template>...</template> の内部を修正
<Top/>
の代わりに
<router-view />
をいれた