我正在尝试使用vue-router
在我的导航栏组件下方显示路由组件,但我收到标题中指定的错误。
这是我的代码:
main.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
的模板中,一切都会按预期工作。没有路由器应用程序也可以正常工作。