Vue 2에서 Vue Router를 사용하는 방법

Question

나는 Vue를 배우고 the webpack template으로 시작했습니다. 내가하고자하는 첫 번째 일은 Vue Router에 대한 지원을 추가하는 것이지만, 이제는 단일 경로 (항상 빈 페이지로 끝남)를 렌더링 할 수 없어도 몇 시간을 소비했습니다. 실망!

단순히 "012"로 작동하는 파일이 다른 ".vue"으로 렌더링되는 레이아웃 파일로 작동하는 하나의 .vue 파일을 갖고 싶습니다. 누군가 이걸 어떻게 할 수 있는지 말해 줄 수 있니, 제발?

main.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import App from './App' 
import Home from './components/Home' 
import About from './components/About' 

Vue.use(VueRouter) 

const routes = [ 
    { path: '/', component: Home }, 
    { path: '/about', component: About } 
] 

const app = new Vue({ 
    router: new VueRouter({ 
     routes 
    }), 
    component: App 
}).$mount('#app') 

App.vue (레이아웃 파일) 구성 요소/홈과 거의 동일

<template> 
    <div id="app"> 
     <h1>Hello App!</h1> 
     <p> 
      <router-link to="/">Go to Foo</router-link> 
      <router-link to="/about">Go to Bar</router-link> 
     </p> 

     <router-view></router-view> 

    </div> 
</template> 

<script> 
    export default { 
    } 

</script> 

<style scoped> 

</style> 

구성 요소/About.vue (: 여기 내 최신 시도가 실패한입니다. vue)

<template> 
    <div> 
     <h1>About</h1> 
     <p>This is the about page!</p> 
    </div> 
</template> 

<script> 
    export default { 
    } 
</script> 

<style scoped> 

</style> 

Answer 1

마침내 작동하게되었습니다. main.js 파일은 다음과 같이 작성해야합니다 :

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import App from './App' 
import Home from './pages/Home' 
import About from './pages/About' 

Vue.use(VueRouter) 

const routes = [ 
    { path: '/', component: Home }, 
    { path: '/about', component: About } 
] 

const router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    router, 
    template: '<App />', 
    components: { 
     App 
    } 
}).$mount('#app') 

나는이 다른 사람에 대한 문제의 시간을 절약 할 수 있기를 바랍니다.

편집

다음은 :

const app = new Vue({ 
    router, 
    render: function(createElement){ 
     return createElement(App) 
    } 
}).$mount('#app')