Cannot read property 'use' of undefined. What is the error when connecting the plugin?

Question

Vue.js

Error in browser console.

router.js?41cb:5 Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (router.js?41cb:5)
    at Module../src/router.js (app.js:1112)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1100)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1149)

main.js file

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

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

router.js file

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },

    {
      path: '/todos',
      component: () => import('./views/Todos.vue'),
    },
  ],
})

Where did I go wrong? How to fix this error?

Answer 1

maybe:

import Router from 'vue-router'
import Home from '@/views/Home'
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },

    {
      path: '/todos',
      component: () => import('./views/Todos.vue'),
    },
  ],
})
export default router

and then in main.js use router (or rather createApp(App, router).mount('#app'))