Laravel 5.3 vue 2组件未呈现
Laravel 5.3 vue 2组件未呈现
提问于 2016-11-07 18:37:14
我使用Laravel5.3与Vue 2和Vue路由器，但我的组件是不可见的。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警告:未能挂载组件:模板或呈现函数未定义。
回答 1
Stack Overflow用户
发布于 2016-11-07 18:54:41
通常的方法是为每个表示整个页面的路由提供一个组件模板，您似乎是在components对象中嵌套一个组件，但是，除非您使用命名视图，否则应该是：
{
path: '/users',
component: UsersIndex
}现在UserIndex应该展示，这是小提琴：
https://jsfiddle.net/1sjvto79/
下面是一个具有命名视图的示例，如果这是您的目标，那么它只是针对一个与组件属性同名的路由器视图：
components: {
users: UsersIndex
}然后在您的标记中：
<router-view name="users"></router-view>这是小提琴：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40472202
复制相关文章
相似问题
腾讯云开发者
