我正在尝试使用 vue-router
在我的导航栏组件下方显示路由组件,但我收到标题中指定的错误。
这是我的代码:
主.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import app from './app';
Vue.use(VueRouter);
const foo = {
template: '<div>foo</div>',
};
const bar = {
template: '<div>bar</div>',
};
const routes = [
{
path: '/',
component: foo,
},
{
path: '/bar',
component: bar,
},
];
const router = new VueRouter({
mode: 'history',
routes,
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(app),
});
应用程序.vue
<template>
<div id="app">
<fs-navbar/>
<main>
<router-view/>
</main>
</div>
</template>
<style scoped lang="scss">
</style>
<script>
import fsNavbar from './components/fs-navbar';
export default {
components: {
fsNavbar,
},
};
</script>
组件/fs-navbar.vue
<template>
<nav>...</nav>
</template>
<style scoped lang="scss">
</style>
<script>
import Vue from 'vue';
export default Vue.component('fs-navbar', {
// logic
});
</script>
此应用导致错误:
vue.js?3de6:2574[Vue warn]: Failed to mount component: template or render function not defined. (found in component <fs-navbar>)
如果我将 fs-navbar
模板直接添加到 app.vue
的模板中,一切都会按预期工作。没有路由器应用程序也能正常工作。
我正在使用 vue-cli与 this template (vuejs2)
最佳答案
类似的问题,当我写的时候:
let routes = [{
path: '/',
component: require('./components/member.vue')
}]
失败:[Vue warn]: 无法挂载组件:未定义模板或渲染函数。
添加“.default”,有效!
let routes = [{
path: '/',
component: require('./components/member.vue').default
}]
PS:"vue": "^2.5.2","vue-router": "^3.0.1""vue-loader": "^13.3.0",
关于vue.js - 无法安装组件 : template or render function not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39871254/