Why doesn't router-view work?

Question

Vue.js

Hello, started learning Vue.js and ran into a problem while using vue-router and router-view.
When rendering the application, an error appears in the console:

Error in render: "TypeError: Cannot read property 'matched' of undefined" 
found in
---> <App> at src/App.vue
       <Root>

If I remove the router-view in App.vue, I see the title, but there is no navigation.

Now the project looks like this:

src/main.js

import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/tickets', component: () => import('@/views/Tickets.vue') },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

src/app.vue

<template>
<div id="app">
<h2>Vue App</h2>
<router-view></router-view>
</div>
</template>

src/views/Home.vue

<template>
  <div>
    <h2>Home page</h2>
    <router-link to="/tickets">Todos</router-link>
  </div>
</template>

src/views/Tickets.vue

<template>
  <div>
    <h2>List of tickets</h2>
    <router-link to="/">Home</router-link>
  </div>
</template>

Also, I would be grateful for a link to the Vue.js tutorial, from the official documentation I can not understand the principles of building a Vue application and the order of their interaction. The project was created via vue-cli.

Answer 1

The problem was the lack of export in the router
export default router

Answer 2

In main.js isn't Vue.use(VueRouter); not needed?)
PS about the structure: https://habr.com/en/post/483064/
PSS about the tutorial - vue has one of the most standard tutorials and its connection is on the main page: https://router.vuejs .org/installation.html