Vue.js 使用Vue Cli网页包安装VueRouter

我使用vue cli命令创建了一个新项目：

vue init webpack myapp

我试图添加

vue路由器

来处理路由，但遇到了问题

这是我的

main.js

：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})

Vue.use(VueRouter)

const router = new VueRouter()

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

router.start(App, '#app')

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
}).$mount('#app')

这是我的

App.vue

：

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use v-link directive for navigation. -->
      <a v-link="{ path: '/foo' }">Go to Foo</a>
      <a v-link="{ path: '/bar' }">Go to Bar</a>
    </p>
    <!-- route outlet -->
    <router-view></router-view>
  </div>
</template>

你好应用程序！

去福
去酒吧

无论我做什么，我似乎都不知道如何让它工作。现在我没有收到任何控制台错误，但浏览器只是显示

无法获取/foo

每一条路线

我目前正在使用

“vue”：“^1.0.21”
“vue路由器”：“^0.7.13”

---

如何开始使用vue路由器？

您需要将路由器添加到

main.js

中引导的vue实例中。例如：

Vue 2.0和Vue路由器2.0

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

Vue 1.0和Vue路由器<2.0

router.start({
  components: { App }
}, '#app')

---

嘿@Primoz，我相信你是对的，我需要包括路由器。然而，我仍然得到相同的错误，所以看起来可能有其他错误。我将更新问题以包括

路由器.start

。我很确定，如果您按照与我相同的步骤操作，您应该能够重现错误。任何更多的帮助都将不胜感激！您正在运行哪个版本的

vue

和

vue路由器

？默认根目录是否正常工作（例如

http://localhost:8080

）和类似于

/foo

的子程序注释？我刚刚更新了问题，将其包括在内。默认路由不工作。（在我将

vue路由器添加到我的
main.js
之前，它就已经存在了…
我认为你不需要在你的main.js中使用这个部分…
新的vue（{el:'body'，components:{App}）。$mount（“#App'）
。只需引导你的应用程序，正如你在我的回答中看到的那样，使用
router.start（）
我们可能越来越近了，现在出现错误“找不到元素”#app'`
router.start({
  components: { App }
}, '#app')