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

Question

我正在学习Vue，并开始使用the webpack template。我想要做的第一件事是添加对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> 

组件/ 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')