Компонент Laravel 5.3 vue 2 не отображается

Я использую 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 dev. Но мой компонент UsersIndex не отображается.

Любая идея?

Обновить

Если я попробую

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

Я получаю следующее предупреждение Vue

[Предупреждение Vue]: не удалось смонтировать компонент: шаблон или функция рендеринга не определены.


person user3382438    schedule 07.11.2016    source источник


Ответы (1)


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

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

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

https://jsfiddle.net/1sjvto79/

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

components: {
   users: UsersIndex
}

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

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

Вот скрипка:

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

person craig_h    schedule 07.11.2016