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/