Laravel 5.3 vue 2组件不渲染答案

【问题标题】：Laravel 5.3 vue 2 component not renderingLaravel 5.3 vue 2组件不渲染
【发布时间】：2017-03-21 05:03:58
【问题描述】：

我将 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 警告]：无法挂载组件：未定义模板或渲染函数。

【问题讨论】：

标签： php laravel vue.js vue-router

【解决方案1】：

执行此操作的通常方法是为代表整个页面的每个路由设置一个组件模板，您似乎将组件嵌套在 components 对象中，但是除非您使用 named views，否则它应该是：

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

现在应该显示 UserIndex，这是小提琴：

https://jsfiddle.net/1sjvto79/

这是一个带有命名视图的示例，如果这是您的目标，它只是针对与组件属性同名的路由器视图：

components: {
   users: UsersIndex
}

然后在您的标记中：

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

这是小提琴：

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

【讨论】：