Vue路由器错误答案

【问题标题】：Vue Router ErrorVue路由器错误
【发布时间】：2017-02-21 23:04:24
【问题描述】：

尝试设置 Vue 路由器。不知道我做错了什么。得到错误

Failed to mount component: template or render function not defined. (found in root instance)

再一次，我是从 React 来到 Vue 的，虽然它们非常相似，但也有一些小的不同之处，而且 Vue 资源还没有那么多。

我正在使用 Webpack 模板并使用单个文件组件。我不完全理解的一件事是文档中的这一部分

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

这只是他和我一样import Foo from 'path/to/component/吗？

无论如何，感谢您的任何帮助！

这是我的main.js 文件

import Vue from 'vue'
import App from './App'
import QuizBuilder from '../src/components/QuizBuilder.vue'
import ResourceInfo from '../src/components/ResourceInfo.vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/info', component: ResourceInfo },
  { path: '/quiz-builder', component: QuizBuilder }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

我的index.html 看起来像这样

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Digestible</title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

【问题讨论】：

您的 QuizBuilder 或 ResourceInfo 组件有模板吗？
是的，我使用了 webpack 模板生成器，所以我的 QuizBuilder.vue 和 ResourceInfo.vue 文件都有 <template></template>、<script></script> 和 <style></style> 部分。
看看这是否有帮助archive.forum.vuejs.org/topic/4399/…

标签： vue.js vue-router

【解决方案1】：

假设您拥有正确的组件，您仍然需要进行小更新。

当加载vue路由器作为模块系统时，应用程序应该通过以下方式初始化：

new Vue({
   el: '#app',
   router,
   render: h => h(App)
});

【讨论】：

好的。是的，我做到了，实际上做到了render: h => h('view-router')，这似乎解决了它。谢谢！