代码之家 › 专栏 › 技术社区 › Carlos Salazar

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

vue-router vue.js javascript

Carlos Salazar · 技术社区 · 6 年前

我正在用 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 部件负荷正常,但不是 家 在第一次加载中,我如何解决这个问题?

我的 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>

1 回复 | 直到 6 年前

Satachito 6 年前

在中描述模板 新古典主义

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