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 Дев инструментов. Но мой компонент UserIndex не отображается.

Любая идея?

Update

Если я пытаюсь

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

я получаю следующее предупреждение Вью

[предупредить Вю]: Не удалось установить компонент: шаблон или визуализации функции не определены.

Answer 1

Обычный способ сделать это, чтобы иметь один шаблон компонента для каждого маршрута, который представляет всю страницу, вы, кажется, гнездящихся компонент в components объекта, однако, если вы используете named views, оно должно быть:

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

Теперь UserIndex должен показывать, вот скрипку:

https://jsfiddle.net/1sjvto79/

Вот пример с именем точки зрения, если это то, что вы стремитесь, это просто та rgets вида маршрутизатора с тем же именем, что и атрибут компоненты:

components: { 
    users: UsersIndex 
} 

затем в разметке:

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

Вот скрипка:

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