Question

我完全停止使用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')

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>

Answer 1

So the first thing, you dont need to register Vue.component('dashboard', dashboard) The Reference to in the routes is enough. Everything else looks good for me. Do you have any Errors in your console?

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

Answer 2

您似乎尚未注册此操作的任何组件

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

您的路由器似乎需要类似的东西：

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

<router-view>在升级到vue.js 2.0时没有功能

2 个答案: