使用 Vue-Cli Webpack 安装 VueRouter答案

【问题标题】：Install VueRouter with Vue-Cli Webpack使用 Vue-Cli Webpack 安装 VueRouter
【发布时间】：2016-09-18 22:30:05
【问题描述】：

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

vue init webpack myapp

我正在尝试添加 vue-router 来处理路线，但我遇到了问题。

这是我的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')

这是我的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>shivaminyanim.com</title>
  </head>
  <body>
    <app></app>
    <!-- built files will be auto injected -->
  </body>
</html>

这是我的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-router": "^0.7.13",

如何开始使用 vue-router？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您需要在main.js 中将路由器添加到您的引导式 Vue 实例。比如这样：

Vue 2.0 和 Vue-router 2.0

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

Vue 1.0 和 Vue-router

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

【讨论】：

嘿@Primoz，我相信你是对的，我需要包括路由器。但是，我仍然遇到同样的错误，所以看起来可能还有其他问题。我将更新问题以包含router.start。如果您按照与我相同的步骤操作，我很确定您应该能够重现该错误。任何更多的帮助将不胜感激！
你在运行vue和vue-router的哪个版本？默认根是否正常工作（例如http://localhost:8080）并且只是像/foo这样的子路由注释？
我刚刚更新了问题以包含该问题。默认路由不起作用。（在我将vue-router 的东西添加到我的main.js 之前，它就这样做了
我认为您的 main.js 中不需要这部分...new Vue({el: 'body', components: { App }}).$mount('#app')。只需使用router.start() 引导您的应用程序，如您在我上面的回答中看到的那样
我们可能越来越近了，现在我有错误`找不到元素'#app'`