javascript - Vue路由器在第一次加载时不加载组件
问题描述
我正在用vue
and建立一个页面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>
解决方案
在新的 Vue中描述模板
const app = new Vue({
el: '#app',
components : { App },
router,
template: '<app />'
});
推荐阅读
- angularjs - Intellij 中带有业力的空测试套件
- python - 当有一个工人和多个队列时,芹菜如何工作?
- javascript - 带有viewchild的ng模板中的角度材料标题排序
- ios - 无法启动 /private/var/containers/Bundle/Application/
- python - 我可以仅使用 Pandas (Python) 创建 Excel 工作簿吗?
- java - 运行时更改表 - Spring API Rest
- ios - 如何从presentingViewController 模态地呈现ViewController?
- jquery - 如何在输入现场服务门户旁边显示错误消息
- warnings - CVX 警告是什么意思?
- node.js - 连接到 ms bot 框架的通道的皮肤