我正在学习将 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
。它与错误有什么关系吗?
原文由 psudo 发布,翻译遵循 CC BY-SA 4.0 许可协议
尝试将
.default
添加到您的组件需要: