Laravel 5.3 vue 2组件不呈现

Question

我使用Laravel 5.3与Vue 2和Vue Router但我的组件不可见。 Foo和Bar正在工作。

这里是我的App.js

/** 
* Load JavaScript dependencies 
*/ 

require('./bootstrap'); 

/** 
* Import Vue and VueRouter 
*/ 

import Vue from 'vue' 
import VueRouter from 'vue-router' 

/** 
* Import Components 
*/ 
import UsersIndex from './components/users/Index.vue' 
import Example from './components/Example.vue' 

/** 
* Use VueRouter 
*/ 
Vue.use(VueRouter) 

/** 
* Define components 
*/ 
const Foo = { template: '<div>Foo</div>' } 
const Bar = { template: '<div>Bar</div>' } 

/** 
* Create Router 
*/ 
const router = new VueRouter({ 

    mode: 'history', 

    routes: [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar }, 
    { 
     path: '/users', 
     components: { 
      component: UsersIndex 
     } 
    } 
    ] 
}) 

/** 
* Create Vue instance and inject router 
*/ 
new Vue({ 

    router 

}).$mount('#app') 

我没有在vuejs开发工具得到任何错误。但我的UsersIndex组件不可见。

有什么想法？

更新

如果我尝试

{ 
    path: '/users', 
    component: UsersIndex 
} 

我得到以下Vue公司警告

[Vue公司提醒]：无法安装组件：模板或呈现功能没有定义。

Answer 1

通常的方法做，这是对代表整个页面的每个路由一个组件模板，你似乎在components对象进行嵌套一个组成部分，但除非你正在使用named views，它应该是：

{ 
    path: '/users', 
    component: UsersIndex 
} 

现在UserIndex应显示，这里的小提琴：

https://jsfiddle.net/1sjvto79/

这里有一个命名视图的例子，如果这就是你的目标，它只是TA rgets具有相同的名称作为组件属性的路由器观点：

components: { 
    users: UsersIndex 
} 

然后在您的标记：

<router-view name="users"></router-view> 

这里的小提琴：

https://jsfiddle.net/1sjvto79/1/