如何在 Vue 2 中使用 Vue 路由器

我正在学习 Vue，并开始于网页包模板 https://github.com/vuejs-templates/webpack/tree/master/template/src。我想做的第一件事是添加对 Vue Router 的支持，但我现在已经花了几个小时在上面，但无法渲染单个路由（我总是得到一个空白页面）。令人沮丧！

我只是想拥有一个.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>

Components/About.vue（与 Components/Home.vue 几乎相同）

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

<script>
    export default {
    }
</script>

<style scoped>

</style>

我终于让它发挥作用了。 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')

我希望这可以为其他人节省数小时的麻烦。

EDIT

下列：

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

最好可以替换为：

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