Javascript Vue路由器在首次加载时未加载组件

我正在用

vue

和

vue路由器

构建一个页面，我得到了这样的路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import App from './views/App'
import Home from './views/Home'
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        }
    ],
});
const app = new Vue({
    el: '#app',
    components : { App },
    router
});

问题是，

Home

组件没有安装，为什么？这是组件

<template>
    <div class="row">
        <section class="home-screen" data-stellar-background-ratio="0.5">
            <div class="content d-flex">
                <div class="col s10 center-block d-flex justify-content-around flex-column">
                    <div class="">
                        <h2 class="banner-text main text-white">
                        Inicia ahora mismo esta emocionante experiencia.
                        </h2>
                        <div class="center-align">
                            <a href="#!" class="btn btn-go bg-mustard text-black waves waves-effect mb-2" alt="Crea tu sitio web o tienda virtual"><h6 class="font-montserrat mb-0">Crea tu página</h6></a>
                            <a href="#find-store" class="text-gray modal-trigger find-store"><h4 class="text-6 font-montserrat mt-0 mb-0">O haz click aquí para buscar tu tienda virtual</h4></a>
                        </div>
                        <div class="big-title-container center-align">
                            <h1 class="text-white super-big-title"><span class="la-w">W</span>ebinablink</h1>
                            <h3 class="banner-text main sub text-gray font-montserrat light title-3 mt-0">
                            Crea tu página web... ¡en un parpadeo!
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    export default {
        mounted: function() {
            console.log('hello')
        }
    }
</script>

---

在新Vue中描述模板

const app = new Vue({
    el: '#app',
    components : { App },
    router,
    template: '<app />'
});

const-app=新的Vue({
el:“#应用程序”，
组件：{App}，
路由器，
模板：“”
});

您的第一个代码片段是否有完整的代码？我在声明中看不到Home组件。抱歉，我以为我复制了Home的导入，我编辑了以下问题：你的App.vue是什么样子的？你的App.vue是否有内置组件？@CarlosSalazar，如果哈希模式有效，这意味着你没有在服务器中为mode=history设置正确的配置。检查这个

const app = new Vue({
    el: '#app',
    components : { App },
    router,
    template: '<app />'
});