[英]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.