Vue路由器錯誤

嘗試設置Vue路由器。不知道我做錯了什麼。收到錯誤Vue路由器錯誤

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

我再次從作出反應來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>

來源

2016-10-13 maxwellgover

請您QuizBuilder或ResourceInfo中的組件有模板？ – ceejayoz

是的，我使用了webpack模板生成器，所以我的'QuizBuilder.vue'和'ResourceInfo.vue'文件都有''，''和''部分。 – maxwellgover

看看這是否有幫助http://archive.forum.vuejs.org/topic/4399/vue-2-0-vue-warn-failed-to-mount-component-template-or-render-function-not-defined -in-root-instance – Deepak

假設你有正確的組件，你還需要一個小的更新。

當裝載VUE路由器模塊系統，應用程序應該具有以下方式初始化：

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

來源

2016-10-14 06:07:47 ragnar

好的。是的，我做到了，實際上做了render：h => h（'view-router'）'，這似乎解決了它。謝謝！ – maxwellgover

Vue路由器錯誤

回答

相關問題