2016-10-13 7 views
1

Vue Router를 시도하는 중입니다. 내가 뭘 잘못하고 있는지 모르겠다. 나는 반응에서 뷰에오고있어, 또 다시 오류Vue 라우터 오류

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

얻기 서로 다른하고 많은 뷰 자원이 아직 거기가없는 작은 것들가 꽤 비슷있다.

저는 Webpack 템플릿을 사용하고 있으며 단일 파일 구성 요소를 사용하고 있습니다. 내가 import Foo from 'path/to/component/을하고 나는 완전히 이해하지 못 한 가지 문서

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

에서이 부분이었다 이것은 그가 같은 단지인가?

어쨌든 모든 도움에 감사드립니다.

다음은 여전히 ​​작은 업데이트가 필요

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

당신의 QuizBuilder 또는 ResourceInfo 구성 요소가 템플릿을 가지고 있습니까? – ceejayoz

+0

그래 내'QuizBuilder.vue'와'ResourceInfo.vue'이 파일을 각이'',''

관련 문제