Приветствую всех профи и начинающих.
Затягивать "слишком" долго не буду, поэтому перейду к сути:
Дело в том, что я создал .vue компонент, сделал main.js файл, ну и .html, в которых "вроде бы" всё сделал правильно, но не работает как надо)
Когда я нажимаю на остальные роуты, по типу "+ Бренды, Блог..." - то они вроде бы работают как надо.
Я создал новый компонент "TEST.vue", но он как бы не отображается от слова совсем, я уже более 7-ми часов сижу над этой дилеммой, и не понимаю почему не работает.
Кстати, когда закомментировал всё содержимое main.js - роутер продолжал работать, но вот тот же TEST.vue - так же нет.
Вот код:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-router</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<header>
<div class="header-wrapper">
<img src="http://acmelogos.com/images/logo-8.svg" alt="" class="logo">
<nav>
<router-link to="/brands">+ Бренды</router-link>
<router-link to="/blog" active-class="grey">+ Блог</router-link>
<router-link to="/projects">+ Проекты</router-link>
<router-link to="/contacts">+ Контакты</router-link>
<router-link to="/capes">+ TEST</router-link>
</nav>
</div>
</header>
<router-view></router-view>
</div>
<script src="build/bundle.js"></script>
</body>
</html>
main.js:
var Vue = require('vue')
// var VueRouter = require('vue-router') // BUG: Вызывает ошибку "TypeError: o is not a constructor"
// Чтобы исправить данную ошибку необходимо использовать один из следующих вариантов подключения
var VueRouter = require('vue-router').default
// import VueRouter from 'vue-router'
var capes = require('./views/TEST.vue')
var Brands = require('./views/Brands.vue')
var Contacts = require('./views/Contacts.vue')
var Projects = require('./views/Projects.vue')
var Blog = require('./views/Blog.vue')
var Post = require('./views/Post.vue')
Vue.use(VueRouter)
var router = new VueRouter({
routes: [
{ path: '/capes', component: capes },
{ path: '/brands', component: Brands },
{ path: '/contacts', component: Contacts },
{ path: '/projects', component: Projects },
{ path: '/blog', component: Blog },
{ path: '/post/:id', name: 'post', component: Post }
]
})
new Vue({
el: '#app',
router: router
})
Ну и тот самый TEST.vue:
<template>
<div id='okey'>
<h1>А где вообще сам роут?????</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
#okey {
color: black;
}
</style>
P.s. я более чем уверен, что проблема таится в самом лёгком, но такового я не знаю.
Если Вы мне поможете - то я, а так же возможно другие, столкнувшиеся с этой проблемой - будут знать как это решить, и будут благодарны Вам.
