@kyern
Быдлокодер без стажа

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

Здравствуйте, начал изучать 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.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Проблема была в отсутствии экспорта в роутере
export default router
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rpsv
@rpsv
делай либо хорошо, либо никак
В main.js разве Vue.use(VueRouter); не нужен?)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы