我完全坚持使用 vue.js 2.0 和 vue-router 让组件通过路由器视图呈现。
我安装了 vue devtools，我确实看到了路由器视图旁边的“片段”标签，但没有其他详细信息。
可能需要注意的是，我使用的是 laravel-elixir-vueify 和 browserify。
应用程序.js
var Vue = require('Vue');
var VueRouter = require('vue-router');
import dashboard from './components/dashboard.vue'
Vue.component('dashboard', dashboard);
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: '/', component: dashboard }
]
const app = new Vue({
router
}).$mount('#vueapp')
仪表盘.blade.php
<div id="vueapp">
//other code removed for space
<router-view></router-view>
</div>
仪表板.vue
<template>
<div class="col-md-12 col-lg-12">
<div class="block">
<div id="showCalendar"></div>
</div>
</div>
</template>
//Note: I tried adding an extra <div></div> within the template, but that didn't make a difference.
<script>
export default{
mounted: function() {
this.CompCalendar();
},
methods: {
CompCalendar: function() {
/* Initialize FullCalendar */
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
this.$nextTick(function() {
var events = this.$http.get('/events/local/index')
.then(function(response){
$('#showCalendar').fullCalendar({
header: {
//unimportant options
},
//unimportant options
eventClick: function(calEvent, jsEvent, view){
var eventId = calEvent.id;
router.push({
path: 'details/'+eventId
});
},
});
})
});
}
}
};
</script>