使用 Vue-Cli Webpack 安装 VueRouter

Question

我使用 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>

无论我做什么，我似乎都无法弄清楚如何让它发挥作用。现在我没有收到任何控制台错误，但浏览器只显示

Cannot GET /foo

分别为每条路线。

我目前正在使用

"vue": "^1.0.21"
"vue-router": "^0.7.13",

如何开始使用 vue-router？

Answer 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 < 2.0

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

使用 Vue-Cli Webpack 安装 VueRouter

Install VueRouter with Vue-Cli Webpack

vue.js

vue-router