Vue Router で画面遷移ができない。

Question

前提

Vue 3
Vite

実現したいこと

Vue Routerを用いて画面遷移をしたい。

該当のソースコード

./router.ts

import { createRouter, createWebHistory } from 'vue-router'
import Test from './components/test.vue'

const routes = [
    {
        path: '/test',
        component: Test
    }
]

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

export default router

./main.ts

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

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

./App.vue

<template>
    <router-link to="/test">Testページへ</router-link>
</template>

現在の状態

画面にリンクは表示され押下した時ブラウザのURLは記載したものに変わるのですが、画面が遷移されません。
Chromeの開発者ツールのコンソールではエラーや警告は発生していません。

解決方法のご教授をお願いいたします。

Comments

[macaron_xxx]

フォルダ構成とファイルを明記してください。

Answer 1

ご回答ありがとうございました。
Viteを再起動したところ画面表示されました。

しかし、画面が遷移されるのではなく「test.vue」画面に移動ではなく
「test.vue」が下に表示が追加されるという形になってしまいました。

画面遷移をしたいのですが、ご教授願えませんでしょうか？

Answer 2

router-viewがないからでは？

<template>
    <router-link to="/test">Testページへ</router-link>
    <router-view/>
</template>

Comments

[futuv1234]

router-view
を記載したのですが、同様の動きで画面遷移できませんでした。