Не работает vue Router, почему?

Question

[danilr]

Никак не пойму, почему не подставляются компоненты на место router-view.
Вот код в router.js :

import Vue from 'vue';
import VueRouter from 'vue-router';
import StepOneMain from "@/components/Main/Step-1-Main.vue";

import MapSearch from '@/components/mapSearch/index.vue'

import ipotekaApp from '@/components/ipotekaApp.vue';
Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/ipoteka',
            name: 'ipotekaSteps',
            component: ipotekaApp,
            children: [
                { path: 'main', name: "main", component: StepOneMain }
            ]
        },
        {
          path: '/search', name: 'mapSearch', component: MapSearch
        }
    ]
})

Вот в главном файле app.js

import Vue from 'vue';
import App from './components/App';

require('./bootstrap');

import Header from './components/Header_Footer/Head.vue';
Vue.component('compHeader', Header);
import router from './routers/routers.js';
import { store } from './store/store.js';

const app = new Vue({
    el: '#app',
    render: h => h(App),
    store,
    router
});

App.vue:

<template>
  <div id="app" class="app">
    <compHeader :options="options"></compHeader>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "./Header_Footer/Footer.vue";
export default {
  components: {
    Footer
  }
};
</script>

И код компоненты, например, Ipoteka:

<template>
  <div class="app-overlay" id="app">
    <div class="app-wrapper">
      <div class="main-wrapper">
        <div class="main-block">
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

[nvdfxx]

import router from './routers/routers.js';

буковка лишняя, не?

Comments

[danilr]

Не, так назвали)