인프런 커뮤니티 질문&답변

main.js

import { createApp } from 'vue';  
import Router from './Router';
import routes from './routes';


createApp(Router)
    .use(routes) 
    .mount('#root');

Router.vue

<template>
    <div>
        <div>
            <router-link to="/number-baseball">숫자야구</router-link>
            <router-link to="/response-check">반응속도</router-link>
            <router-link to="/rock-scissors-paper">가위바위보</router-link>
            <router-link to="/lotto-generator">로또생성기</router-link>
        </div>
        <router-view /> <!-- 바뀌는 부분 -->
    </div>
</template>

<script>
import router from './routes';

export default router;
</script>

routes.js

import { createRouter, createWebHistory } from 'vue-router';
import NumberBaseball from '../3.숫자야구/NumberBaseball';
import ResponseCheck from '../4.반응속도체크/ResponseCheck';
import RockScissorsPaper from '../5.가위바위보/RockScissorsPaper';
import LottoGenerator from '../6.로또/LottoGenerator'; 

const routes = [
    { path: '/number-baseball', component: NumberBaseball }, 
    { path: '/response-check', component: ResponseCheck },
    { path: '/rock-scissors-paper', component: RockScissorsPaper },
    { path: '/lotto-generator', component: LottoGenerator },
];

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

export default {
   
}

위와 같이 뷰 라우터 링크가 반응하지 않습니다

Vue는 3.3.4 버전, Vue-router는 4.2.4 버전을 사용하고 있습니다

왜.. 안될까요? 공식문서를 보면서 수정해봐도 해결이 안됩니다.