Laravel 5.3 vue 2コンポーネントがレンダリングされていない

Question

Vue 2とVue RouterでLaravel 5.3を使用していますが、コンポーネントが表示されません。フーとバーが働いています。ここで

は、私がvuejs devのツールのいずれかのエラーを取得していない私の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') 

です。しかし、私のUsersIndexコンポーネントは表示されません。

更新

私は

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

をしようとすると、私は次のVueは

を警告取得[Vueが警告]：テンプレートまたは関数定義されていないのレンダリング：コンポーネントのマウントに失敗しました。

Answer 1

これを行うための通常の方法は、ページ全体を表し、各ルートの一つの成分テンプレートを持つことです、あなたはcomponentsオブジェクト内のコンポーネントを入れ子にしているようだ、しかし、あなたはnamed viewsを使用している場合を除き、それは次のようになります。

それはあなたが、それだけでTAを目指していたものかどう

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

は、名前のビューを持つ例を示します

今UserIndexが表示されるはず

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

は、ここにフィドルですあなたのマークアップで、その後

components: { 
    users: UsersIndex 
} 

：コンポーネント属性と同じ名前を持つルータビューをrgets

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

はここでフィドルです：

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