[英]Vue-router not loading component on first load
我正在用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
只是一个导航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>
在新Vue中描述模板
const app = new Vue({
el: '#app',
components : { App },
router,
template: '<app />'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.