Vue-路由器在第一次加载时不加载组件

Question

我正在用vue和vue-router建立一个页面，我有这样的路线

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>

如果我添加了另一个路由器并按其应有的方式使用router-link组件加载，而在第一个负载中不使用Home，我如何解决这个问题？

我的App.vue只是导航和页脚，组件是

<template>
    <div>
        .... a navbar ....
        <div class="body z-depth-5">
            <router-view :key="$route.path" @ajaxover="ajaxOver"></router-view>
        </div>
        .... a footer ....
    </div>
</template>
<script>
    import PageLogo from '../components/PageLogo'
    import Loading from '../components/Loading'
    export default {
        mounted : function(){

        },
        components : {
            'page-logo' : PageLogo,
            'loading' : Loading
        },
        methods : {
            ajaxOver : function() {

            }
        }
    }
</script>

Answer 1

描述新Vue中的模板

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