2016-10-15 6 views
0

Ich bin völlig auf eine Komponente zum Rendern über Router-View mit dem vue.js 2.0 und vue-Router.<router-view> nicht funcitoning auf upgrade auf vue.js 2.0

Ich habe Vue Devtools installiert und ich sehe die "Fragment" -Label neben Router-Ansicht, aber keine anderen Details.

Könnte wichtig sein zu beachten, dass ich Laravel-Elixir-vueify verwenden und browserifizieren.

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') 

dashboard.blade.php

<div id="vueapp"> 
    //other code removed for space 
    <router-view></router-view> 
</div> 

dashboard.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> 
+0

Ich bin ziemlich sicher, dass dies mit einem Laravel-Elixir-Vueify-Konflikt im Zusammenhang steht, der Vue 1.0 referenziert – retrograde

+0

haben Sie einen Schluck nach der Aktualisierung ausgeführt? Wie sehen Ihre packages.json und gulpfile.js aus? – developernator

Antwort

0

Das erste, was, Sie nicht Vue.component('dashboard', dashboard) Der Referenz registrieren müssen zu den Routen ist genug. Alles andere sieht gut für mich aus. Haben Sie Fehler in Ihrer Konsole?

Versuchen routes = [ { path: '', component ..

0

Es scheint, wie Sie keine Komponente für diese Aktion registriert haben

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

Es scheint, wie man so etwas in Ihrem Router benötigen:

{ path: '/details', component: Details }