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對象中嵌套了一個components ，但是，除非使用命名視圖 ，否則應為：

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

現在應該顯示UserIndex，這是小提琴：

https://jsfiddle.net/1sjvto79/

這是一個帶有命名視圖的示例，如果這是您想要的目標，那么它僅以與組件屬性名稱相同的路由器視圖為目標：

components: {
   users: UsersIndex
}

然后在您的標記中：

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

這是小提琴：

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