Почему не работает router-view?

Question

[Антон Белокуров]

Здравствуйте, начал изучать Vue.js и столкнулся с проблемой при использовании vue-router и router-view.
При рендере приложения в консоли появляется ошибка:

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

Если в App.vue я удаляю router-view, я вижу заголовок, но соответвенно нет никакой навигации.

Сейчас проект выглядит следующим образом:

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>

Так же я был бы признателен за ссылку на туториал по Vue.js, из официальной документации мне не удается понять принципы построения приложения Vue и порядок их взаимодействия. Проект был создан через vue-cli.

Answer 1

[Михаил]

Проблема была в отсутствии экспорта в роутере
export default router

Answer 2

[Илья]

В main.js разве Vue.use(VueRouter); не нужен?)

P.S. по поводу структуры: https://habr.com/ru/post/483064/
P.S.S. по поводу туториала - у vue один из самых норм туториалов и на главной странице его подключение есть: https://router.vuejs.org/installation.html

Comments

[Антон Белокуров]

Илья, После добавления

import VueRouter from 'vue-router'
Vue.use(VueRouter)

в main.js абсолютно ничего не поменялось. Я полагаю, что это не требуется так как мы импортируем router/index.js в котором уже указан импорт и использование роутера. Или это не так работает?

[Михаил]

Антон Белокуров, router/index хоть что то экспортирует?

[Антон Белокуров]

Михаил, его приведен в вопросе полностью, нет, экспорта там нет. Что он должен экспортировать? Я пробовал писать туда export default {router}
Это ничего не меняло.

[Михаил]

Антон Белокуров, export default router

[Михаил]

Антон Белокуров,

new Vue({
  router,

Вот здесь что в переменной та?

[Антон Белокуров]

Михаил, я еще раз добавил

export default {
  router
}

в src/router/index.js
Прошлая ошибка осталась, но добавилась еще одна
TypeError: router.afterEach is not a function

[Антон Белокуров]

Михаил, проглядел Ваше первое сообщение, добавил export default router, все заработало. Оформите отдельным ответом, отмечу решением. Спасибо за помощь. Был так же благодарен за ссылку про то как работает или кем обрабатывается этот экспорт. Это функционал Webcomponents или чей?

[Михаил]

Антон Белокуров, лучше бы документации читали