此series中,我正在学习将Vue.js与Laravel结合使用,但叙述者没有收到任何错误,但是在单击更改路线时遇到了以下错误。
[Vue警告]:无法装入组件:模板或渲染函数未定义。
以下代码来自我的app.js
:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue')
},
{
path: '/profile',
component: require('./components/Profile.vue')
}
]
const router = new VueRouter({
routes
})
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
router
});
我的Dashboard.vue
中的代码段:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
我的master.blade.php
布局中的代码段:
//sidebar
<ul>
<li>
<router-link to="/dashboard" class="nav-link">Dashboard</li>
<li>
<router-link to="/profile" class="nav-link">Profile</li>
</ul>
//content
<div class="container-fluid">
<router-view></router-view>
</div>
我正在localhost:3000
和browserSync
在npm run watch
上运行应用程序。与错误有关吗?
答案 0 :(得分:2)
尝试将.default
添加到组件需要
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue').default
},
{
path: '/profile',
component: require('./components/Profile.vue').default
}
]
答案 1 :(得分:1)
//只需添加“从'vue'导入Vue”,组件就会显示出来!
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue')
},
{
path: '/profile',
component: require('./components/Profile.vue')
}
]
const router = new VueRouter({
routes
})
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
router
});
答案 2 :(得分:0)
尽管不适用于该问题的细节,但是如果无法将自己的HTML包装在<template>
... </template>
标签中,也会遇到上述错误消息。这将导致vue无法检测到模板,因为尚未通过标签或对象属性对其进行定义。
例如,在Dashboard.vue
中,如果要写(在Dashboard.vue
内):
<!-- EXAMPLE OF INCORRECT SYNTAX: missing <template> tag -->
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
而不是:
<template> <!-- NOTE THE <template> tag, here -->
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template> <!-- NOTE THE </template> tag, here -->
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
一个人将收到错误消息:Vue.js Failed to mount component: template or render function not defined
答案 3 :(得分:0)
这困扰了我很长时间,更改是如此之小,以至于我几乎无法在两个不同的路由器文件中注意到它,其中一个有效,一个无效。
代替
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue')
}]
您应该使用
let routes = [{
path: '/dashboard',
component:()=> import('./components/Dashboard.vue')
}]
关键是组件属性也将接受一个函数,在该函数中,您可以返回导入的组件,该组件仅在需要时才被调用。如果直接输入require()
,则会立即将其导入。