0

vue.js 2.0 と vue-router を使用して、ルータービューを介してコンポーネントをレンダリングすることに完全に行き詰まっています。

vue devtools がインストールされており、router-view の横に「fragment」というラベルが表示されますが、その他の詳細は表示されません。

私がlaravel-elixir-vueifyとbrowserifyを使用していることに注意することが重要かもしれません。

App.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>
4

2 に答える 2

0

Vue.component('dashboard', dashboard) したがって、最初に、ルートへの参照を登録する必要はありません。他のすべては私には良さそうです。コンソールにエラーはありますか?

試すroutes = [ { path: '', component ..

于 2016-10-15T17:17:57.510 に答える
0

このアクションのコンポーネントが登録されていないようです

router.push({
   path: 'details/'+eventId
});

ルーターに次のようなものが必要なようです。

 { path: '/details', component: Details }
于 2016-10-17T14:15:10.357 に答える