Why is the vue-router component not showing up?

A

alaskafx2021-03-19 22:43:46

JavaScript

alaskafx, 2021-03-19 22:43:46

Greetings to all pros and beginners.
I won’t drag out “too” long, so I’ll get to the point:

The fact is that I created a .vue component, made a main.js file, and .html, in which I “seemed to” do everything right, but it doesn’t work as it should )
When I click on the rest of the routes, like "+ Brands, Blog ..." - they seem to work as they should.
I created a new component "TEST.vue", but it seems to be not displayed from the word at all, I've been sitting on this dilemma for more than 7 hours, and I don't understand why it doesn't work.

By the way, when I commented out the entire contents of main.js, the router continued to work, but the same TEST.vue didn’t either.

Here is the code:

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
})

Well, the same TEST.vue:

<template>
  <div id='okey'>
    
    <h1>А где вообще сам роут?????</h1>
    </div>
    
</template>

<script>
export default {

}
</script>

<style>
#okey {
  color: black;
}
</style>

Ps I'm more than sure that the problem lies in the easiest one, but I don't know of one.
If you help me, then I, as well as possibly others who have encountered this problem, will know how to solve this, and will be grateful to you.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

Q

qqNemo, 2021-03-20
@qqNemo

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/capes.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 => capes.vue: