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>

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

不能GET / foo

分别为每条路线。

我目前正在使用

＆＃34; vue＆＃34;：＆＃34; ^ 1.0.21＆＃34;
＆＃34; vue-router＆＃34;：＆＃34; ^ 0.7.13＆＃34;，

如何开始使用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＆lt; 2.0

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

使用Vue-Cli Webpack安装VueRouter

1 个答案: