<router-view> 在升级到 vue.js 2.0 时不起作用答案

【问题标题】：<router-view> not funcitoning on upgrade to vue.js 2.0<router-view> 在升级到 vue.js 2.0 时不起作用
【发布时间】：2017-02-24 13:00:51
【问题描述】：

我完全坚持使用 vue.js 2.0 和 vue-router 让组件通过路由器视图呈现。

我安装了 vue devtools，我确实看到了路由器视图旁边的“片段”标签，但没有其他详细信息。

可能需要注意的是，我使用的是 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>

【问题讨论】：

我很确定这与引用 vue 1.0 的 laravel-elixir-vueify 冲突有关
更新后你运行gulp了吗？你的 packages.json 和 gulpfile.js 是什么样的？

标签： vue.js vue-component vue-router

【解决方案1】：

所以第一件事，你不需要注册Vue.component('dashboard', dashboard) 路线中的参考就足够了。其他一切对我来说都很好。您的控制台中有任何错误吗？

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

【讨论】：

【解决方案2】：

您似乎没有为此操作注册任何组件

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

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

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

【讨论】：