如何在Vue 2中使用Vue Router

Question

我正在学习Vue,并开始使用webpack模板.我要做的第一件事就是添加对Vue路由器的支持,但我现在花了几个小时就没有能够呈现单一路由(我总是以空白页面结束).令人沮丧!

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

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,
    template: '<App />',
    components: {
        App
    }
}).$mount('#app')

最好可以替换为:

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