Vue router 작동안됨 해결

router 폴더에 index.js 만들고 

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Search from '../views/SearchView.vue';
import Factorial from '../views/FactorialView.vue';
import FactorialSetup from '../views/FactorialSetup.vue';

const routes = [
  {
    path: '/',
    name: 'SearchView',
    component: Search,
  },
  {
    path: '/factorial',
    name: 'FactorialView',
    component: Factorial,
  },
  {
    path: '/factorialSetup',
    name: 'FactorialSetup',
    component: FactorialSetup,
  }
];

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

export default router;

main.js 코드에서 라우터를 Vue 인스턴스에 추가했는데도

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

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

 

Vue.router가 작동하지 않았음

무엇이 문제인가 생각했는데 전에는 vue-router를  설치했던 것 같아서 npm vue-router로 있는지 확인 했는데 없었음

npm install vue-router@4 명령어로 추가 (Vue 3을 사용하는 경우, vue-router의 4.x 버전을 설치해야 호환됨)

router가 제대로 작동한다.