Почему не отображается роут Vue Router?

Question

Столкнулся с бедой Vue Router'a. Итак, суть проблемы: Есть код, есть роуты, почти все роуты работают, кроме одного, того, который я вот-вот создал. Дело в том - что он как бы изменяет url на /capes - но содержимого нету, т.е. всё белое, кроме роутер линков, а ну и линк с url на /capes - становиться белым, когда на него заходишь :).

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>

БЛОГ НА HUSL

Почему не отображается роут Vue Router?

Ответы (0 шт):