vue router not working, why?

Question

Vue.js

I don’t understand why the components are not substituted in place of the router-view.
Here is the code in 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
        }
    ]
})

Here in the main app.js file

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>

And the component code, for example, 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

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

the letter is superfluous, isn't it?