1

我正在尝试使用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的模板中，一切都会按预期工作。没有路由器应用程序也可以正常工作。

我正在使用带有此模板的 vue-cli (vuejs2)

4

2 回答 2

4

微笑的问题，当我写：

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

于 2018-07-11T01:11:02.950 回答
1

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

更改时：

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

至：

export default {}

一切正常。

于 2016-10-05T11:43:01.970 回答