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 {}

一切都很好。

无法安装组件：模板或渲染函数未定义

main.js

app.vue

组件/ FS-navbar.vue

2 个答案: