2016-10-13 3 views
1

Probieren Sie den Vue Router aus. Nicht sicher, was ich falsch mache. Abrufen des FehlersVue Router Fehler

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

Noch einmal, ich bin von Reagieren auf Vue kommen und während sie sind ziemlich ähnlich gibt es kleine Dinge, die anders sind, und es gibt nicht so viele Vue Ressourcen noch da draußen.

Ich verwende die Webpack-Vorlage und die Verwendung einzelner Dateikomponenten. Eine Sache, die ich nicht ganz verstand war dieser Teil in der Dokumentation

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

Ist das nur er so wie ich import Foo from 'path/to/component/ tun?

Wie auch immer, danke für jede Hilfe!

Hier ist meine main.js Datei

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') 

Meine index.html wie diese Annahme,

<!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> 
+1

Sie Ihre Quizbuilder oder Resource Komponenten-Vorlagen? – ceejayoz

+0

Ja, ich verwenden, um den webpack Template-Generator so meine 'QuizBuilder.vue' und' ResourceInfo.vue' Dateien jeweils '', '' und '' Abschnitte. – maxwellgover

+0

sehen, ob dies hilft http://archive.forum.vuejs.org/topic/4399/vue-2-0-vue-warn-failed-to-mount-component-template-or-render-function-not-defined -found-in-root-instance – Deepak

Antwort

4

sieht man die Komponenten richtig haben, können Sie immer noch ein kleines Update benötigen.

Beim Laden vue Router als Modulsystem, sollte die Anwendung mit der folgenden Art und Weise initialisiert werden:

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

Ok. Ja, das habe ich gemacht und tatsächlich 'rendern: h => h (' view-router ') 'und das schien es zu lösen. Vielen Dank! – maxwellgover