无法挂载组件：未定义模板或渲染函数

Question

我正在尝试使用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),
});

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)

Answer 1

类似的问题，当我写的时候：

let routes = [{
    path: '/',
    component: require('./components/member.vue')
}]

失败：[Vue 警告]：挂载组件失败：未定义模板或渲染函数。

添加“.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",

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

Answer 2

事实证明，Vue.component() 返回值不适用于路由器。

更改时：

export default Vue.component('component-name', {})

到：

export default {}

一切正常。